HTML5 Canvas：在負載下繪制的貝塞爾曲線
[英]HTML5 Canvas: Bezier curve to draw on load
問題描述
我已經繪制了貝塞爾曲線。 但我想在加載時對Bezier曲線進行動畫處理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）上繪制曲線
2 個解決方案
解決方案1
0 2014-11-21 14:49:50
如果要對曲線進行動畫處理，可以像這樣來構造代碼：
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
}
解決方案2
0 已采納 2014-11-21 15:32:35
您可以作弊以獲得效果，盡管動畫不會按照線條彎曲（您必須停止計時器，並且如果附近有其他繪制的對象，這可能不起作用）
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);
Html canvas 用貝塞爾曲線繪制平滑線
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.