HTML5 画布:加载时绘制的贝塞尔曲线

HTML5 Canvas: Bezier curve to draw on load

本文关键字：曲线 绘制 画布 加载 HTML5      更新时间：2023-09-26

我画了贝塞尔曲线。但是我想在加载中对贝塞尔曲线进行动画处理 1 次。

请帮助我..

下面是下面的代码：

   window.onload = function() {
    
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var x=10, y=25;
    
    function curve() {
      context.beginPath();
      context.moveTo(214, 0);
      context.bezierCurveTo(328, 80, 153, 82, 216, 162);
      context.lineWidth = 10;
      context.strokeStyle = 'gray';
      context.stroke();
     }
    
    curve();
    
    };
<body>
<canvas id="canvas" width="300" height="300" style="text-align: left; border: 1px solid black; position: absolute; left: 100px;"></canvas>
</body>

曲线绘制在 0 到 （328， 80， 153， 82， 216， 162）

你可以作弊来获得效果，尽管动画不会根据线条弯曲（您必须停止计时器，如果附近有其他绘制的对象，这可能不起作用）

http://jsfiddle.net/o9k83k0g/

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var x=10, y=25;
var show=0;    
function curve() {
  context.beginPath();
  context.moveTo(214, 0);
  context.bezierCurveTo(328, 80, 153, 82, 216, 162);
  context.lineWidth = 10;
  context.strokeStyle = 'gray';
  context.stroke();
  context.beginPath();   
  context.fillStyle = 'white';
  context.fillRect(160,0+show,100,175-show);
  context.stroke();
  show=show+1;
 }
setInterval(function(){curve();}, 30);

如果你想对曲线进行动画处理，你可以像这样构造你的代码：

var snake = {
    points:[ {x:100,y:100},{x:100,y:150},{x:100,y:200},{x:100,y:250} ]
}
function loop(){
    physic( snake )
    display( snake )
}
setInterval( loop, 20 )

在物理函数中，您可以根据需要更新蛇结构中的点。在显示函数中，您可以执行以下操作：

function display( snake ){
    var point = snake.points[0];
    ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.moveTo( point.x, point.y );
    for( i=0; i< snake.points.length-1; i++ ){
        point = snake.points[i];
        var xc = (point.x + snake.points[i + 1].x) / 2;
        var yc = (point.y + snake.points[i + 1].y) / 2;
        ctx.quadraticCurveTo( point.x, point.y, xc, yc );
    }
    ctx.stroke();
}

困难的部分是物理功能。

function physic( snake ){
    snake.points[2].x++ // An example
}
相关文章：