如何在頁面上追加和運行JavaScript/jQuery動畫

在我的代碼中，我創建了兩個canvas標籤並將它們附加到主體。該動畫旨在畫一張支票。在頁面加載時，兩個畫布標籤都附加到頁面上，但只繪製一張支票。如何在頁面上追加和運行JavaScript/jQuery動畫

var start = 100; 
 
var mid = 145; 
 
var end = 250; 
 
var width = 22; 
 
var leftX = start; 
 
var leftY = start; 
 
var rightX = mid - (width/2.7); 
 
var rightY = mid + (width/2.7); 
 
var animationSpeed = 20; 
 

 
function draw(ctx){ 
 

 
    for (var j = 0; j < 2; j++){ 
 

 
    var canvas = $("<canvas height='200'/>") 
 
    $("body").prepend(canvas); 
 
    var ctx = document.getElementsByTagName('canvas')[j].getContext('2d'); 
 

 
ctx.lineWidth = width; 
 
ctx.strokeStyle = 'rgba(0, 150, 0, 1)'; 
 

 
    ctx.lineWidth = width; 
 
    ctx.strokeStyle = 'rgba(0, 150, 0, 1)'; 
 
} 
 

 
for (i = start; i < mid; i++) { 
 
    var drawLeft = window.setTimeout(function() { 
 
     ctx.beginPath(); 
 
     ctx.moveTo(start, start); 
 
     ctx.lineTo(leftX, leftY); 
 
     ctx.stroke(); 
 
     leftX++; 
 
     leftY++; 
 
    }, 1 + (i * animationSpeed)/3); 
 
} 
 

 
for (i = mid; i < end; i++) { 
 
    var drawRight = window.setTimeout(function() { 
 
     ctx.beginPath(); 
 
     ctx.moveTo(leftX, leftY); 
 
     ctx.lineTo(rightX, rightY); 
 
     ctx.stroke(); 
 
     rightX++; 
 
     rightY--; 
 
    }, 1 + (i * animationSpeed)/3); 
 
    } 
 
} 
 
draw();

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
</head> 
 
<body> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
</body> 
 
</html>

來源

2017-03-17 Arron J. Linton

我重新佈置的碼一點。問題的癥結在於將<canvas>標記與從循環計數器（canvas0，canvas1，...）派生的id進行插入。

然後使用document.getElementById("canvas" + i)定位該特定畫布並通過draw(ctx)方法發送。

另外leftX，leftY，rightX，rightY是draw(ctx)函數內的局部變量需要。

var start = 100; 
 
var mid = 145; 
 
var end = 250; 
 
var width = 22; 
 
var animationSpeed = 20; 
 

 
jQuery(function($) { 
 
\t for (var j = 0; j < 2; j++){ 
 
\t \t var canvas = $("<canvas id='canvas" + j + "' height='200'/>") 
 
\t \t $("body").prepend(canvas); 
 
\t \t var ctx = document.getElementById('canvas' + j).getContext('2d'); 
 

 
\t \t ctx.lineWidth = width; 
 
\t \t ctx.strokeStyle = 'rgba(0, 150, 0, 1)'; 
 

 
\t \t ctx.lineWidth = width; 
 
\t \t ctx.strokeStyle = 'rgba(0, 150, 0, 1)'; 
 
\t \t 
 
\t \t draw(ctx) 
 
\t } 
 
}) 
 

 
function draw(ctx){ 
 

 
\t var leftX = start; 
 
\t var leftY = start; 
 
\t var rightX = mid - (width/2.7); 
 
\t var rightY = mid + (width/2.7); 
 

 
\t for (i = start; i < mid; i++) { 
 
\t \t var drawLeft = window.setTimeout(function() { 
 
\t \t \t ctx.beginPath(); 
 
\t \t \t ctx.moveTo(start, start); 
 
\t \t \t ctx.lineTo(leftX, leftY); 
 
\t \t \t ctx.stroke(); 
 
\t \t \t leftX++; 
 
\t \t \t leftY++; 
 
\t \t }, 1 + (i * animationSpeed)/3); 
 
\t } 
 

 
\t for (i = mid; i < end; i++) { 
 
\t \t var drawRight = window.setTimeout(function() { 
 
\t \t \t ctx.beginPath(); 
 
\t \t \t ctx.moveTo(leftX, leftY); 
 
\t \t \t ctx.lineTo(rightX, rightY); 
 
\t \t \t ctx.stroke(); 
 
\t \t \t rightX++; 
 
\t \t \t rightY--; 
 
\t \t }, 1 + (i * animationSpeed)/3); 
 
\t } 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
</head> 
 
<body> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
</body> 
 
</html>

來源

2017-03-17 19:17:22 dana

如何在頁面上追加和運行JavaScript/jQuery動畫

回答

相關問題