84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
如图的贴纸是canvas绘制的,我想让这个图像移动,一直做不出。1、绘制的图像用jquery无法选择到,也就等于无法设置其offset位置来改变2、想过使用重绘然后清除之前的绘制图像,但是这样背景那一块也被清除了。求大牛解答
光阴似箭催人老,日月如移越少年。
一定要用canvas吗?
如果一定要用canvas,可以和大多交互性的原始画布一样,使用一个渲染循环(rendering loop),例如使用requestAnimationFrame,里面根据条件对每个显示对象(display object)进行不断的渲染。每个显示对象都因该有坐标信息,是否显示标识位等,用来在渲染循环里做渲染用。
像你这里,可以定义连个显示对象,一个是background,一个是picture,移动picture的时候改变他的坐标值就够了,这样渲染循环中自动会重新绘制他的位置,并且由于background没有变化,因此原样绘制出来
------ 2016/09/24 更新 ------
稍微补充下。什么是动画?动画是因为在每一帧的绘制中被绘制物体的显示属性不一样,比如尺寸,位置和颜色的变化。这样在连续的绘制中,看起来就成了动画。
在计算机里的实现,就是控制每一帧画面内容。简单描述起来就是:
每一帧开始时,清空画面(无任何内容)
找到所有要显示的对象,分别按顺序绘制它们
这一帧绘制结束
就是这么简单粗暴!不断的快速得重新绘制所有内容。如果你不了解计算机绘图,可能你会觉得不能接受,可能会觉得“就这么不停的绘制,计算机累不累啊”,但计算机就是真么工作的,而且还干的不错。
可能因为初学前端,对动画的概念停留在用css或者js控制HTML元素的位置这种高层的操作,不了解实际上在底层,是浏览器在对页面内容进行了上面的绘制过程。canvas其实就是提供了这样一个原始的,底层的绘制平台,让我们用JS控制绘制。
下面是最简单的例子,在canvas中表达上面的绘制过程:
function Stage (ctx) { this.ctx = ctx; this.displayObjects = []; } Stage.prototype.add = function (displayObject) { this.displayObjects.push(displayObject); }; // 渲染循环 Stage.prototype.render = function () { var displayObjects = this.displayObjects; var ctx = this.ctx; function loop () { // 清空画布 ctx.clearRect(0, 0, 400, 400); // 重绘每一个displayObject displayObjects.forEach(function (displayObject) { displayObject.update(ctx); }); requestAnimationFrame(loop); } loop(); }; // 一个简单的display object function Rectangle (x, y, w, h) { this.x = x; this.y = y; this.w = w; this.h = h; } // display object主要是根据自己的属性知道如何绘制自己 Rectangle.prototype.update = function (ctx) { ctx.beginPath(); ctx.rect(this.x,this.y,this.w,this.h); ctx.stroke(); ctx.closePath(); }; var stage; function init () { var canvas = document.getElementById('cvs'); var ctx = canvas.getContext('2d'); // 创建两个display object var rect = new Rectangle(10, 10, 20, 40); var sqr = new Rectangle(50, 50, 30, 30); stage = new Stage(ctx); // 放入stage并开始渲染循环 stage.add(rect); stage.add(sqr); stage.render(); // 这里不断改变一个display object的显示属性 setInterval(function () { rect.x = (rect.x + 1) % 400; rect.y = (rect.y + 1) % 400; }, 16) } init();
这里的例子很简单,很粗暴,但是展示了一些canvas库或者一些游戏库的绘制思想。里面有很多地方可以优化,比如在渲染循环里,可以减少不必要的绘制:比如两个矩形的坐标和大小都没有变化时,其实不需要不停的渲染了,这里的渲染就是在浪费计算能力,影响性能。简答的优化就是,当display object的显示元素发生更新时,把stage标记为dirty,只有在dirty情况下,才出发一次渲染循环。
演示:https://jsfiddle.net/ygjack/f...
两层canvas就行了。底层放背景,顶层放这个需要移动的图像,移动图像在顶层操作就是了
要不断的变换坐标再画
一两句说不清,简单点就是通过 requestAnimationFrame 来不断渲染canvas(就像电视一样一秒出现多少格画)。把要移动的图定义成对象,来改变他在canvas中的X,Y的坐标,这样就会出现动起来的效果。
不知道你说的移动是想显示怎样的效果,如果只是单纯的xy轴移动的话可以设置定时器来改变x和y坐标的值 渲染前加个清除画布就可以了
一定要用canvas吗?
如果一定要用canvas,可以和大多交互性的原始画布一样,使用一个渲染循环(rendering loop),例如使用requestAnimationFrame,里面根据条件对每个显示对象(display object)进行不断的渲染。每个显示对象都因该有坐标信息,是否显示标识位等,用来在渲染循环里做渲染用。
像你这里,可以定义连个显示对象,一个是background,一个是picture,移动picture的时候改变他的坐标值就够了,这样渲染循环中自动会重新绘制他的位置,并且由于background没有变化,因此原样绘制出来
------ 2016/09/24 更新 ------
稍微补充下。什么是动画?动画是因为在每一帧的绘制中被绘制物体的显示属性不一样,比如尺寸,位置和颜色的变化。这样在连续的绘制中,看起来就成了动画。
在计算机里的实现,就是控制每一帧画面内容。简单描述起来就是:
每一帧开始时,清空画面(无任何内容)
找到所有要显示的对象,分别按顺序绘制它们
这一帧绘制结束
就是这么简单粗暴!不断的快速得重新绘制所有内容。如果你不了解计算机绘图,可能你会觉得不能接受,可能会觉得“就这么不停的绘制,计算机累不累啊”,但计算机就是真么工作的,而且还干的不错。
可能因为初学前端,对动画的概念停留在用css或者js控制HTML元素的位置这种高层的操作,不了解实际上在底层,是浏览器在对页面内容进行了上面的绘制过程。canvas其实就是提供了这样一个原始的,底层的绘制平台,让我们用JS控制绘制。
下面是最简单的例子,在canvas中表达上面的绘制过程:
这里的例子很简单,很粗暴,但是展示了一些canvas库或者一些游戏库的绘制思想。里面有很多地方可以优化,比如在渲染循环里,可以减少不必要的绘制:比如两个矩形的坐标和大小都没有变化时,其实不需要不停的渲染了,这里的渲染就是在浪费计算能力,影响性能。简答的优化就是,当display object的显示元素发生更新时,把stage标记为dirty,只有在dirty情况下,才出发一次渲染循环。
演示:https://jsfiddle.net/ygjack/f...
两层canvas就行了。
底层放背景,顶层放这个需要移动的图像,移动图像在顶层操作就是了
要不断的变换坐标再画
一两句说不清,简单点就是通过 requestAnimationFrame 来不断渲染canvas(就像电视一样一秒出现多少格画)。
把要移动的图定义成对象,来改变他在canvas中的X,Y的坐标,这样就会出现动起来的效果。
不知道你说的移动是想显示怎样的效果,如果只是单纯的xy轴移动的话可以设置定时器来改变x和y坐标的值 渲染前加个清除画布就可以了