动画在画布中移动图像
Im new to using canvas but wonder if i could get some help or advice on where to start with this. i currently have a circle drawn on canvas and have tried multiple ways i thought might work but cant get my head round it. When searching online i can only really find help where the shapes are drawn in canvas itself.
我是使用画布的新手,但想知道我是否可以获得一些帮助或建议从哪里开始。我目前在画布上绘制了一个圆圈,并尝试了多种我认为可行的方法,但我无法绕过它。在线搜索时,我只能在画布本身绘制形状时找到帮助。
Here is what i have so far: JSFiddle
这是我到目前为止:JSFiddle
JavaScript:
var one = document.getElementById("canvOne");
var canvOne = one.getContext("2d");
var img = new Image();
img.onload = function(){
canvOne.drawImage(img, 10, 10);
};
img.src = "img/circle.jpg";
function oneStart(){
for(var i = 0; i < 300; i++){
img.style.left = i + 'px';
setTimeout(oneStart, 1000);
}
};
can anyone give me a hand with this please?
请有人帮我一把吗?
1 个解决方案
#1
0
jsFiddle : http://jsfiddle.net/8eLL7L5L/3/
jsFiddle:http://jsfiddle.net/8eLL7L5L/3/
javascript
//canvas one
var one = document.getElementById("canvOne");
var canvOne = one.getContext("2d");
var img = new Image();
var animate = false;
var circlePosX = 10;
var circlePosY = 10;
img.onload = function () {
canvOne.drawImage(img, circlePosX, circlePosY);
};
img.src = "http://www.alexvolley.co.uk/other/circle.jpg";
var start = function()
{
animate = true;
}
var stop = function()
{
animate = false;
}
setInterval(function () {
// Only update circle position if animate is true
if (animate) {
circlePosX += 1;
canvOne.fillStyle = "#FFF";
canvOne.fillRect(0, 0, one.width, one.height);
canvOne.drawImage(img, circlePosX, circlePosY);
}
}, 3);
All I have done is created 3 variables and added a few little functions, the circle's XPos and YPos are now stored so we can access them, I have also created a bool
variable animate
which is used to check if we should animate the circle.
我所做的就是创建了3个变量并添加了一些小函数,现在存储圆圈的XPos和YPos以便我们可以访问它们,我还创建了一个bool变量animate,用于检查是否应该为圆圈设置动画。
The start function simply sets animate
to true
start函数只是将animate设置为true
The stop function simple sets animate
to false
stop函数simple将animate设置为false
the setInterval just keeps running the same code over and over every 3 miliseconds, all this does is clears the canvas and then redraws the circle. If we don't clear the canvas you would see multiple circles appear when animate is true.
setInterval每隔3毫秒就会一直运行相同的代码,所有这一切都会清除画布,然后重绘圆圈。如果我们不清除画布,您会看到当animate为true时会出现多个圆圈。
I hope this helped
我希望这有帮助
更多相关文章
- 如何设置动画以使元素围绕圆圈移动?
- 检查并删除重复的坐标x,y画布
- Canvas(画布)类的使用
- Android自定义万能Canvas画布
- 如何使用2个旋转圆圈获得与ICS相同的未定义ProgressBar?