HTML5帆布|我怎樣才能讓這項工作更順暢，更好？

我試圖在畫布中創建一個波動畫，但它的工作速度非常慢（可能是因爲錯誤的代碼）。
我該如何讓這項工作更流暢，並讓Wave（Math.sin）看起來更像海浪？
下面是代碼：HTML5帆布|我怎樣才能讓這項工作更順暢，更好？

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>HTML 5 site</title> 
     <style> 
     #canvas{ 
     margin:0 auto; 
     } 
     *{ 
     overflow:hidden; 
     } 
     </style> 
     <script src="jquery-1.6.4.min.js"></script> 
    </head> 
    <body> 
    <div id="warp"> 
    <canvas id="canvas" style="border:1px solid black;" /> 
    Your Browser does not support HTML5; 
    </canvas> 
    </div> 
    <script> 
    $(document).ready(function(){ 
    resizeCanvas(); 
    function resizeCanvas() { 
    $("#canvas") 
     .attr('width', $(window).width()) 
     .attr('height', $(window).height()); 
    } 

    $(window).resize(resizeCanvas()); 
     x=0;y=0; 
     var ctx = $("#canvas").get(0).getContext('2d'); 
     $('#canvas').mousemove(function(e){ 
     resizeCanvas(); 
     for(var i=0;i<=$(window).width();i++){ 
      y =Math.sin((i+x)*50)*12; 
      ctx.fillStyle = "blue"; 
      ctx.arc(i, y+100, 4, 0, 2*Math.PI); 
      ctx.fill(); 
      } 
      x+=20; 
     }); 
    }); 
    </script> 
    </body> 
</html>

來源

2011-10-01 funerr

我改變了代碼不少，取消了jQuery的依賴。不過，我爲加速代碼所做的主要事情是將fill僅在繪製操作後調用一次，並開始/結束繪製路徑。此外，我對resizeCanvas()的召回感到困惑，我只想將其與window.onresize事件聯繫起來，並將畫布設置爲窗口的innerwidth/innerheight。

Live Demo

var canvas = document.getElementById('canvas'), 
    ctx = canvas.getContext('2d'), 
    x=0,y=0; 

canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 


canvas.onmousemove= function(e){ 
    //clear the canvas 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    ctx.fillStyle = "blue"; 

    var width = window.innerWidth; 

    // start the path 
    ctx.beginPath(); 
    //draw it 
    for(var i=0;i<=width;i++){ 
     y=Math.sin((i+x)*50)*12; 
     ctx.arc(i, y+100, 4, 0, 2*Math.PI); 
    } 
    //close it 
    ctx.closePath(); 
    //fill it 
    ctx.fill(); 
    x+=20; 
}

來源

2011-10-01 19:47:19 Loktar

哇偉大的作品！但現在我怎樣才能使辛克看起來更像是一個波？我想讓更多的寬度傳播。 – funerr

HTML5帆布|我怎樣才能讓這項工作更順暢，更好？

回答

相關問題