首页 > canvas中绘制的图像怎么让它移动?

canvas中绘制的图像怎么让它移动?

如图的贴纸是canvas绘制的,我想让这个图像移动,一直做不出。
1、绘制的图像用jquery无法选择到,也就等于无法设置其offset位置来改变
2、想过使用重绘然后清除之前的绘制图像,但是这样背景那一块也被清除了。
求大牛解答


要不断的变换坐标再画


不知道你说的移动是想显示怎样的效果,如果只是单纯的xy轴移动的话可以设置定时器来改变x和y坐标的值 渲染前加个清除画布就可以了


一定要用canvas吗?

如果一定要用canvas,可以和大多交互性的原始画布一样,使用一个渲染循环(rendering loop),例如使用requestAnimationFrame,里面根据条件对每个显示对象(display object)进行不断的渲染。每个显示对象都因该有坐标信息,是否显示标识位等,用来在渲染循环里做渲染用。
像你这里,可以定义连个显示对象,一个是background,一个是picture,移动picture的时候改变他的坐标值就够了,这样渲染循环中自动会重新绘制他的位置,并且由于background没有变化,因此原样绘制出来


一两句说不清,简单点就是通过 requestAnimationFrame 来不断渲染canvas(就像电视一样一秒出现多少格画)。
把要移动的图定义成对象,来改变他在canvas中的X,Y的坐标,这样就会出现动起来的效果。


两层canvas就行了
底层放背景,顶层放这个需要移动的图像,移动图像在顶层操作就是了

【热门文章】
【热门文章】