HTML5畫布：用負載繪製的貝塞爾曲線

我繪製了貝塞爾曲線。但是我想讓Bezier曲線在載入時動畫一次。HTML5畫布：用負載繪製的貝塞爾曲線

請幫助我..

在這裏，下面的代碼：

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）

來源

2014-11-21 SekDinesh

以何種方式動畫？ – 2014-11-21 13:41:32

動畫在蛇的運動是可能的 – SekDinesh 2014-11-21 14:27:18

你可以欺騙獲得的效果，雖然動畫沒有根據線路（你必須停止計時，如果有其他繪製的對象靠近它，這可能無法正常工作）

彎曲

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);

來源

2014-11-21 15:32:35 dwana

非常感謝你...... – SekDinesh 2014-11-24 10:01:23

對不起，說...我需要填寫樣式「透明」是否可能或不.. ..？ – SekDinesh 2014-11-24 11:08:18

是這樣嗎？ http://jsfiddle.net/cqdse2bp/1/ – dwana 2014-11-24 12:55:58

如果你想動畫曲線，你可以像這樣構造你的代碼：

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 
}

來源

2014-11-21 14:49:50

感謝您的支持....但真的很抱歉...我需要貝塞爾曲線，但在這裏宣佈二次曲線...和一個更多的物理（蛇）這個功能不工作... – SekDinesh 2014-11-21 15:06:44

這只是一個例子。您可以在顯示功能中輕鬆地用Bezier曲線代替quadraticCurveTo。 – 2014-11-21 15:34:12

選中此：http://jsfiddle.net/bgw07yd5/1/。這是你在找什麼？ – 2014-11-21 15:51:28

HTML5畫布：用負載繪製的貝塞爾曲線

回答

相關問題