[英]How do you copy an animation in canvas
I have this animation of a semicircle being drawn, and I basically want to copy it, and move the copy down 60px then add a delay of a second to the new one, So that it draws a "B" 我已经绘制了一个半圆的动画,我基本上想复制它,然后将副本向下移动60px,然后向新的动画添加一秒的延迟,以便绘制一个“ B”
html html
<canvas id="thecanvas"></canvas>
script 脚本
var can = document.getElementById('thecanvas');
ctx = can.getContext('2d');
can.width = window.innerWidth;
can.height = window.innerHeight;
window.drawCircle = function (x, y) {
segments = 90, /* how many segments will be drawn in the space */
currentSegment = 0,
toRadians = function (deg) {
return (Math.PI / 180) * deg;
},
getTick = function (num) {
var tick = toRadians(180) / segments; /*360=full, 180=semi, 90=quarter... */
return tick * num;
},
segment = function (end) {
end = end || getTick(currentSegment);
ctx.clearRect(0, 0, can.width, can.height);
ctx.beginPath();
ctx.arc(x, y, 60, (1.5 * Math.PI), end + (1.5 * Math.PI), false);
ctx.stroke();
ctx.closePath();
};
ctx.lineWidth = 5;
ctx.strokeStyle = 'rgba(0,0,0,0.5)';
setTimeout(function render() {
segment(getTick(currentSegment));
currentSegment += 1;
if (currentSegment < segments) {
setTimeout(render, 5);
} else {
currentTick = 0;
}
}, 250);
};
drawCircle(100, 100);
Here is a fiddle http://jsfiddle.net/zhirkovski/bJqdN/ 这是一个小提琴http://jsfiddle.net/zhirkovski/bJqdN/
first you can put the setTimeout
function outside of your drawCircle
method. 首先,您可以将
setTimeout
函数放在drawCircle
方法之外。
Then you have at least 2 options : 那么您至少有2个选择:
to create an "endDraw" Event which will be dispatched at the end of 1 draw. 创建一个“ endDraw”事件,该事件将在1个抽奖结束时分派。 When this event is handle, just call again the drawCircle method.
处理此事件后,只需再次调用drawCircle方法。 To achieve this, of course you need a main method to call the first drawCircle.
为此,您当然需要一个main方法来调用第一个drawCircle。
To make a better solution, you can describe a workflow of calls. 为了提供更好的解决方案,您可以描述呼叫的工作流程。 ie describe a list of method to call and for each of them the start frame:
例如,描述要调用的方法列表,以及每个方法的起始帧:
var workflow = [{method:"drawCircle", frame:0, x:100, y:100}, //the first half circle at the frame 0, x=100, y=100 {method:"drawCircle", frame:1000, x:100, y:190}]; //the second half circle starting at frame 1000, x=100, y=190
The your main timer will just be configured to use this array to know what call to do 您的主计时器将被配置为使用此数组来知道要执行什么调用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.