关于html5 canvas 绘图动画的问题,我要实现把一张图片绘制在canvas中,然后使其动起来,代码如下,
答案:1 悬赏:0 手机版
解决时间 2021-03-17 14:42
- 提问者网友:泪痣哥哥
- 2021-03-16 19:20
关于html5 canvas 绘图动画的问题,我要实现把一张图片绘制在canvas中,然后使其动起来,代码如下,
最佳答案
- 五星知识达人网友:过活
- 2021-03-16 20:44
首先,你这个代码中最后的setInterval("draw()", 100);应该改为setInterval(draw, 100);第一个参数应该是方法名,虽然你那样写也会有效,但强烈建议不要那么写。然后你说你的代码只是在屏幕上闪一下,那么你在画的时候先调一下cxt.beginPath();画结束的时候掉一下cxt.closePaht();试试,这个w3c网站上有讲解,不确定能不能解决你的问题。
补充:测了一下代码,发现问题是出在你的
img.onload=function()
{
cxt.drawImage(img,x,y,80,80);
}
这里,这边不能在img.onload回调方法中调用画图函数,直接画图就好了, cxt.drawImage(img,x,y,80,80);就这样。追问大师 非常感谢你的指导 ,我的图片已经能够动了 我是把img.onload去掉 但是为什么要去掉这个东西啊我有点不清楚,不是说先要通过img.onload将图片加载好了i以后画出来吗 这里为什么不用呢????追答图片只要加载一遍就行了,而你这样写相当于每画一次,都要加载一遍,那是不可能的咯。因此你可以把这个图片的加载完成函数放到一个绘画判断之前去执行,也就是如果这个onload没有执行,那么你的绘画interval就不要开始,可能说的不太清纯,你自己再理解理解。
补充:测了一下代码,发现问题是出在你的
img.onload=function()
{
cxt.drawImage(img,x,y,80,80);
}
这里,这边不能在img.onload回调方法中调用画图函数,直接画图就好了, cxt.drawImage(img,x,y,80,80);就这样。追问大师 非常感谢你的指导 ,我的图片已经能够动了 我是把img.onload去掉 但是为什么要去掉这个东西啊我有点不清楚,不是说先要通过img.onload将图片加载好了i以后画出来吗 这里为什么不用呢????追答图片只要加载一遍就行了,而你这样写相当于每画一次,都要加载一遍,那是不可能的咯。因此你可以把这个图片的加载完成函数放到一个绘画判断之前去执行,也就是如果这个onload没有执行,那么你的绘画interval就不要开始,可能说的不太清纯,你自己再理解理解。
我要举报
如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
大家都在看
推荐资讯