[英]Draw a line animated continously
我想在畫布上連續畫一條線。 我已經從很多來源讀到了。 有一個示例使用svg和jquery繪制它們。
我想做的是像上述示例http://jsfiddle.net/UtmTh/那樣,在沒有jquery或svg的情況下連續畫一條線。 可能嗎?
像這樣在軌道上畫一條線。
function draw_line(param1,.......) {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//just function to draw a lines
}
function line_track() {
//set X & Y position start
var x = 0;
var y = 30;
//set X & Y position finish
//in here i want to create a finish position of line after animation run,
like a jsfiddle example//
}
如果我的計划和設計有誤,請幫助我。
就像評論中所說的那樣,JQuery庫的唯一用途是獲取畫布元素的第一行。
您可以使用var canvas = document.getElementById("paper");
進行更改 。
另外,如果重復繪圖,則不必在每個繪圖周期執行clearRect
和moveTo
。
var canvas = document.getElementById('paper'); var c = canvas.getContext("2d"); var startX = 50; var startY = 50; var endX = 100; var endY = 100; var amount = 0; c.strokeStyle = "black"; c.moveTo(startX, startY); setInterval(function() { amount += 0.05; // change to alter duration if (amount > 1) amount = 1; // lerp : a + (b - a) * f c.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount); c.stroke(); }, 30);
<canvas id="paper" width="500" height="500"></canvas>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.