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帆布|我怎样才能让这项工作更顺畅，更好？

回答

相关问题