canvas运动算法

❶ 怎么制作canvas沿路径运动

刚好我这有点代码： 我的图片 // 设置绘图环境 var myMap = document.getElementById("Map"); var cxt = myMap.getContext('2d'); // 设置图像位置初始位置的变量 var x = 20; var y = 20; // 创建绘图对象,并且画出来 var img = new Image(); i...

❷ 如何用HTML5的Canvas制作3D动画效果

HTML5的诞生给web前端界带来了不小轰动，像什么动画旋转、图片滑块、图片轮播等等这些3D特效，也引发了不少朋友想要学习HTML5的好奇心。最近我一直在做canvas动画效果，发现canvas这个东西做动画不是不可以。相对于flash，它太底层。如果有给力的编辑器或者给力的框架的话，它就能发挥出更大的威力。

于是决定自己写一个简单一点的动画框架，以便能更方便地构建出一些动画效果。
我将分几个章节来讲述我这个小动画框架的实现：
1.通用类的提取：动画对象与帧对象
2.灵与肉的结合：便于拆卸的运动方程
3.进度条的实现：canvas的图片预加载
4.demo测试：通过一个demo测试框架
这一节我们先来说说通用类的提取。
其实上一篇文章我已经用到了这种从flash借鉴来的思路：一个动画对象（类似flash中的元件），一个帧对象（类似flash中的帧）。动画就是在不断在当前帧上绘制每个动画对象来实现的。有了这两个对象，再加上一些运动方法，我们就可以构建出动画来。
首先我们先来看看动画对象Aniele：
/*
*Aniele动画对象
*所有动画对象的始祖
*/
varAniele=function(){
this.img=newImage();
//定义动画对象位置
this.loca={
x:300,
y:300
}
//定义动画对象的大小（可以实现缩放）
this.dw;
this.dh;
//动画对象的速度属性
this.speed={
x:0,
y:0
}
//设置对象的透明度
this.alpha=1;
//设置图像翻转，1为不翻转，-1为翻转
this.scale={
x:1,
y:1
}
//定动画对象的运动方法库
this.motionFncs=[];
}
Aniele.prototype={
//添加运动方法
addMotionFnc:function(name,fnc) {
this.motionFncs[name]=fnc;
},
//删除运动方法
deleMotionFnc:function(name){
this.motionFncs[name]=null;
},
//遍历运动方法库里的所有运动方法
countMotionFncs:function() {
for(vari=0; i
if(this.motionFncs[i]==null)
continue;
this.motionFncs[i].call(this);
}
},
//把自己绘制出来的方法，包括功能：水平翻转
draw:function(canvas,ctx){
//存储canvas状态ctx.save();
//实现透明度的改变
ctx.globalAlpha=this.alpha;
//实现水平竖直翻转，定义drawImage的两个位置参数dx，dy
vardx=this.loca.x;
vardy=this.loca.y;
if(this.scale.x!=1||this.scale.y!=1){
if(this.scale.x<0){
console.log(this.img.width)
dx=canvas.width-this.loca.x-this.img.width;
ctx.translate(canvas.width,1);
ctx.scale(this.scale.x,1);
}
if(this.scale.y<0){
dy=canvas.height-this.loca.y-this.img.height;
ctx.translate(1,canvas.height);
ctx.scale(1,this.scale.y);
}
}
if(this.dw==null)
this.dw=this.img.width;
if(this.dh==null)
this.dh=this.img.height;
//画出对象
ctx.drawImage(this.img,dx,dy,this.dw,this.dh);
//恢复canvas状态ctx.restore();
}
}
动画对象的主要属性：
this.img=newImage();我们引入一张图片，依附在动画对象上；
this.loca.x等等;图片的大小位置透明度等等，便于绘图时调用；
this.motionFncs=[];这个比较关键，我们给动画对象定义一个运动方法库，把动画对象的运动规则都放在这个运动方法库中统一管理（每个动画对象都有自己的运动方法库）；
动画对象的主要方法：
addMotionFnc： 为动画对象的运动方法库中添加一个运动方法；
deleMotionFnc：为动画对象的运动方法库中删除一个运动方法；
countMotionFncs：为动画对象遍历运动方法库中的所有运动方法；
draw：把动画对象画在画布上，这里我们会把画布作为参数传到这个方法里面去，便于绘图；
在draw方法里，我封装了一些对图像的简单操作，这些操作在动画中会经常用到：透明，缩放和翻转。
有了这个，我们就好似获得了flash里的一个元件，我们可以通过修改它的属性来随意改变它。
那么帧对象呢？
帧对象肩负着渲染的任务，并且管理所有动画对象：
/*
*Render渲染对象
*管理所有动画对象和渲染
*参数：画布对象，画布上下文*/varRender=function(canvas,ctx) {
//引入画布
this.canvas=canvas;
this.ctx=ctx;
//创建一个缓冲画布
this.backBuffer=document.('canvas');
this.backBuffer.width=this.canvas.width;
this.backBuffer.height=this.canvas.height;
this.backBufferctx=this.backBuffer.getContext('2d');
//所有动画对象
this.aniEles=[];
}
Render.prototype={
//初始化画布int
int:function() {
clearInterval(this.sint);
this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
this.backBufferctx.clearRect(0,0,this.backBuffer.width,this.backBuffer.height);
},
//设置开始渲染
begin:function() {
this.lastFrame=(newDate()).getTime();
this.sint=setInterval((function(progra){
returnfunction(){progra.render();}
})(this),SECOND);
},
//主渲染方法
render:function() {
//在画布和缓存画布上清除历史帧
this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
this.backBufferctx.clearRect(0,0,this.backBuffer.width,this.backBuffer.height);
//保存当前的实时输出帧率this.ftp
this.nowFrame=(newDate()).getTime();
this.ftp=1000/(this.nowFrame-this.lastFrame);
this.lastFrame=this.nowFrame;
//调用每个动画对象的运动方法
for(vari=0; i
if(this.aniEles[i]==null)
continue;
this.aniEles[i].countMotionFncs();
//把对象绘制到后台缓冲画布上
this.aniEles[i].draw(this.backBuffer,this.backBufferctx);
}
//把后台对象绘制到前台
this.ctx.drawImage(this.backBuffer,0,0);
},
//增加动画对象
addAniEle:function(name,aniEle) {
this.aniEles[name]=aniEle;
},
//删除动画对象
deleAniEle:function(name) {
this.aniEles[name]=null;
}
}
帧对象的主要属性：
this.aniEles=[];用来存储当前画布上所有动画实例的数组；
大家用过canvas载入图片的应该知道，由于图片的异步载入，动画过程中图片会出现闪烁的现象，为了避免这种现象，我采用了双缓冲。
首先后台创建一个画布：
this.backBuffer=document.('canvas');
this.backBuffer.width=this.canvas.width;
this.backBuffer.height=this.canvas.height;
this.backBufferctx=this.backBuffer.getContext('2d');
我们所有绘制命令都执行在这个后台画布上，最后把后台画布画在前台画布上：
this.ctx.drawImage(this.backBuffer,0,0);
这种先把图绘在后台画布，再把后台画布复制到前台的方法就叫做双缓冲技术。
帧属性的主要方法：
int：用于初始化画布；
begin：开始动画渲染的方法；
render：主渲染的方法；
addAniEle:为当前帧添加动画对象；
deleAniEle：为当前帧删除动画；
我们利用帧对象的流程是：先为当前帧添加动画对象，然后让当前帧开始渲染。

河南新华电脑学院网络运营协会为您解答

❸ canvas相对于div+css3有什么优势一般的绘图也可以用div+css3来实现，求解！

一般的绘图当然是div+css3简单一些。
canvas绘图主要是做一些繁琐的绘图，可能里面会有成千上万个运动，但是电脑并不会卡顿。
canvas做游戏或者比较绚的动画会有优势，但是单独的canvas交互方面可能没有div+css3做的简单。
所以做网页的交互效果还是用css3，canvas只是做一些背景动图和小游戏。

❹ 如何用Canvas绘制多种图形

HTML5 的标准已经出来好久了，但是似乎其中的 Canvas 现在并没有在太多的地方用到。一个很重要的原因是，Canvas 的标准还没有完全确定，不适合大规模用在生产环境。但是，Canvas 的优点也是很明显的，例如在绘制含有大量元素的图表的时候，SVG 往往因为性能问题而无法胜任，例如我见过的一次技术分享会的抽奖环节，虽然效果比较炫，但因为每个头像都是 DOM，利用 CSS3 控制的动画，导致了性能非常低下。此外，随着硬件性能的提高，视频截图、图像处理等功能也逐渐可以在网页上实现了，大多数网站用的是 Flash，但是 Flash 在 Mac 电脑上性能不高，还需要学一些额外的知识。Canvas 则是直接使用 JavaScript 来进行绘图，对 Mac 友好，所以不失为 Flash 的一个继承者。

使用 Canvas
说了这么多，Canvas 究竟是个啥？
英文中 Canvas 的意思是“画布”，不过这里说的 Canvas 是 HTML5 中新出的一个元素，开发者可以在上面绘制一系列图形。Canvas 在 HTML 文件中的写法很简单：
<canvas id="canvas" width="宽度" height="高度"></canvas>

其中 id 属性是所有 HTML 元素都可以用的，Canvas 自带的属性只有后面两个（分别控制宽度、高度），没有其它的了。至于兼容性，CanIUse 上面写了，基础的功能目前用户使用的 90% 的浏览器都支持，所以大部分情况下还是可以放心使用的。

注意，一定要使用 Canvas 自带的 width 和 height 属性，不要使用 CSS 来控制，因为 CSS 控制会导致 Canvas 变形。可以试着与 PhptpShop 对比一下，后者是改变“图像大小”，前者才是正确的改变“画布大小”。例如下图是三张图片的横向拼接：最左边的黑框中是大小为 50px * 50px 的原图；中间是改变了图像大小为 100px * 100px 的效果，图像变得模糊，但是对于图像本身来说坐标范围并没有变大；最右边才是正确的 100px * 100px 的 Canvas。

Canvas 绝大部分的绘图方法都与 <canvas> 标签无关，需要使用 JavaScript 对其进行操作，这就是所谓的 Canvas API。
我们首先获取到这个元素：
var canvas = document.getElementById('canvas');

然后通过一个方法来获取可以调用一切 Canvas API 的入口：
var ctx = canvas.getContext('2d');

看到 2d 是不是很激动地联想到有没有 3d 呢？没有 3d 的写法，不过如果想要开启 3D 世界的大门，则可以写 canvas.getContext('webgl')。然而 WebGL 是基于 OpenGL ES 2.0 的一套标准，与本文是彻彻底底的两条路，因此这里就不讨论了。
Canvas 中的基本概念
坐标
与数学上常见的笛卡尔坐标系不太相同，Canvas 的坐标系是计算机中常见的坐标系，它长这样：

画布的最左上角是 (0,0)，往右 x 增大，往下 y 增大，而且 x 和 y 都是整数（就算在计算过程中不是整数，在绘制的时候也会当作整数处理），单位是像素。
绘图
带大家怀旧一下。不知道有多少同学小时候玩过 logo 语言，在里面你可以控制一只小海龟在一块板子上行走、画画、提笔、落笔。Canvas 中也一样，你需要控制一只画笔的移动和绘制。然而 Canvas 更高级一些，你可以直接利用一些函数来画图，不用去控制那只画笔的位置。
Canvas 中的基本图形
通过上文定义的 ctx 变量可以干许多有意思的事情，我们先看看如何绘制一些基本图形。
线条
我们指定画笔移动到某一点，然后告诉画笔需要从当前这一点画到另一点。我们可以让画笔多次移动、绘制，最后统一输出到屏幕上。例子如下：
ctx.moveTo(10, 10);
ctx.lineTo(150, 50);
ctx.lineTo(10, 50);
ctx.moveTo(10, 20);
ctx.lineTo(40, 70);
ctx.stroke();

上面的代码中，lineTo 是产生线条用的函数，执行完之后画笔就移到了线条的终点。需要注意的是，线条此时并没有显示在屏幕上，必须调用 stroke 才会显示。这样设计是有道理的，因为向屏幕上输出内容需要耗费大量的资源，我们完全可以先攒够一波 lineTo，最后用 stroke 放一个大的。
路径
绘制路径非常简单，只需要先告诉 ctx 一声“我要开始画路径了”，然后通过各种方法（例如 lineTo）绘制路径。如果需要画一个封闭路径，那就最后告诉 ctx一声：“我画完了，你把它封闭起来吧。”当然，不要忘记利用 stroke 输出到屏幕上。
一个简单的例子：
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(150, 50);
ctx.lineTo(10, 50);
ctx.closePath();
ctx.stroke();

如果我不想只描绘路径线条，而是想填充整个路径呢？可以将最后一行的 stroke 改成 fill，这样就跟使用了画图中的油漆桶一样，封闭路径里面的内容就都被填充上颜色了：
ctx.fill();

弧 / 圆形
绘制弧的函数参数比较多：
ctx.arc(圆心 x 坐标, 圆心 y 坐标, 半径, 起始角度, 终止角度, 是否为逆时针);

注意，在 Canvas 的坐标系中，角的一边是以圆心为中心的水平向右的直线。角度单位均为弧度。例如下图，确定了圆心、起始角度（图中标明的锐角）和终止角度（图中标明的钝角），方向为逆时针，于是就有了这么一个弧。如果方向为顺时针，那么就会是一个跟它互补的、非常非常大的弧……

所以如果转了 2π 圈之后，弧就成了圆形，因此也可以使用绘制弧的方式来绘制圆形：
ctx.beginPath();
ctx.arc(圆心 x 坐标, 圆心 y 坐标, 半径, 0, Math.PI * 2, true);
ctx.closePath();

最后一个参数随便填（当然也可以不填），因为不管是顺时针还是逆时针，转了 2π 圈之后都是一个圆。
矩形
如果只是想绘制一个横平竖直的矩形，可以使用下面的两个方法：
// 只描边
ctx.strokeRect(左上角 x 坐标, 左上角 y 坐标, 宽度, 高度);
// 只填充
ctx.fillRect(左上角 x 坐标, 左上角 y 坐标, 宽度, 高度);

线条样式 / 填充样式
之前绘制的所有图形都是黑色的，但是 Canvas 肯定不止这么一种颜色（不然标准的制定者会被喷的很惨）。事实上，Canvas 可以单独设置线条样式和填充样式，分别使用的是 strokeStyle 和 fillStyle。可能的值有三种：纯色、渐变、图像。既然线条样式与填充样式的使用方法相同，那么下面统一以填充样式为例。如果想设置线条样式，直接将所有的 fillStyle改成 strokeStyle 即可，里面的参数都不变。
/* 纯色填充 */
// 普通的颜色
ctx.fillStyle = '#0000ff';
// 带有透明度的颜色
ctx.fillStyle = 'rgba(64, 0, 127, 0.5)';

/* 渐变填充 */
// 设置渐变的尺寸（参数分别为起始点的 x 和 y、终止点的 x 和 y）
var gradient = ctx.createLinearGradient(0, 0, 170, 0);
// 设置过渡色，第一个参数是渐变的位置，第二个参数是颜色
gradient.addColorStop(0, 'magenta');
gradient.addColorStop(0.5, 'blue');
gradient.addColorStop(1.0, 'red');
// 设置填充样式
ctx.fillStyle = gradient;

/* 图片填充 */
// 创建图片
var image = new Image;
image.src = '/path/to/image.png';
// 创建图片笔触，可以指定图片的平铺方式，这里是横向平铺
var pattern = ctx.createPattern(image, 'repeat-x');
// 设置笔触填充
ctx.fillStyle = pattern;

关于渐变，除了代码中提到的线性渐变以外，还有 createRadialGradient，也就是径向渐变。
设置完填充样式之后，就可以使用 fill 来填充啦！如果设置的是线条样式，那么就可以使用 stroke 来描边。
当然，对于线条样式，还有个额外的方法叫 lineWidth 可以用来控制线条的宽度。
文字
要想在画布上画文字，首先需要知道所使用的字体和字号：
ctx.font = '30px Verdana';

然后就可以通过 strokeText 或者 fillText 来对字体描边或者填充字体。
ctx.strokeText("Hello Coding!", 23, 33);
ctx.fillText("Hello Coding!", 23, 66);

图片
在 Canvas 中绘制图片有三种方法：
// 指定绘制位置
ctx.drawImage(image, x, y);
// 指定绘制位置和图像宽高
ctx.drawImage(image, x, y, width, height);
// 指定剪裁区域、绘制位置和图像宽高
ctx.drawImage(image, sx, sy, swidth, sheight, x, y, width, height);

参数的含义依次如下：
image: 要使用的 Image、Canvas 或 Video
sx: 可选，开始剪切的 x 坐标
sy: 可选，开始剪切的 y 坐标
swidth: 可选，被剪切图像的宽度
sheight: 可选，被剪切图像的高度
x: 在画布上放置图像的 x 坐标
y: 在画布上放置图像的 y 坐标
width: 可选，要使用的图像的宽度
height: 可选，要使用的图像的高度

画布设置
细心的同学可能会发现，刚才有些属性是直接对 ctx 变量做设置，例如 ctx.lineWidth，只要设置了它，那么后续画出来的线条全都是这么个宽度。
其实，Canvas 的设置项还有许多，例如我们可以直接移动画布、旋转画布、设置全局的绘制透明度等等。这些设置还可以随时保存和恢复。
要注意的一点是，所有已经画在画布上的东西，是已经定死了的，不管之后再次进行任何设置都不会再改变。这个很像 Windows 下的画图程序。
废话不多说，直接上代码：
// 移动画布，其实就是移动坐标系
ctx.translate(往右移动的量, 往下移动的量);
// 旋转画布，旋转中心为坐标系原点
ctx.rotate(顺时针旋转的角度);
// 以坐标系原点为中心缩放画布
ctx.scale(横向放大倍数, 纵向放大倍数);
// 设置绘制透明度，如果 fillStyle 等属性设置了透明度则会叠加
ctx.globalAlpha(零到一的小数);
// 设置全局组合操作
ctx.globalCompositeOperation = 'lighter';
// 保存当前设置
ctx.save();
// 恢复上次保存的设置
ctx.restore();

移动、旋转、缩放其实就是在控制绘图的坐标系，如果你在调用这三个方法的时候，脑子里时刻有一个带刻度的坐标系，效果会非常好。
事实上，Canvas 的坐标变换遵循计算机图形学的知识：变换矩阵。简单来说，一个坐标可以看成是一个矩阵，坐标所对应的矩阵乘上变换矩阵就可以实现对坐标的变换。为了提升计算的效率，可以先计算出几种变换复合之后的变换矩阵，然后直接通过 transform 函数对当前坐标系进行变换，或者通过 setTransform 函数将坐标系重置为初始状态后再进行变换。至于变换矩阵的内容，对于本文来说就有些超纲了。
全局组合操作有点像 PhotoShop 里面的“混合选项”，具体的实现方式还没有完全确定，目前常见浏览器都统一了的实现方式有：source-over、source-atop、destination-over、destination-out、lighter、xor。具体的行为可以看 Mozilla 官方文档，但是由于标准还未完全确定，因此其它浏览器不保证所有的行为都跟 Mozilla 的标准一致。一般来说，比较常见的是 source-over 和 lighter 两种，这两种的标准在浏览器界也算是无可争议的。
至于保存和恢复设置就有点好玩了，首先需要了解一个叫“栈”的东西。
栈是一个一维数组，规定只能从一个方向操作。栈一开始是空的，我们可以从这个方向往数组 push 元素，也只能从这个方向把最后一个元素（栈顶元素）pop 出来，除此以外没有任何多余的操作。当然，pop 的次数不能多于 push 的次数，因为 pop 到栈底的时候栈里就已经没有元素了，此时再 pop 是没有意义的。栈的用处有很多，例如括号匹配、表达式求值、深度优先搜索，甚至绝大部分语言的函数调用都要用到栈。
每次我们调用 save 函数，实际上是将当前的全局设置 push 到了一个专门栈上，每次调用 restore 函数的时候将最后一次保存的内容 pop 出来并用它覆盖当前的全局设置，这样栈顶就是最近一次保存的内容了。保存和恢复在某些情况下很好用，例如我需要画一个歪着的图形，然后继续画正着的图形，这样就可以先调用 save，然后调用 rotate，画完图形之后再 restore 回来，继续画其它的图形。
其实 Canvas 还有许多方法，例如 toDataURL 直接将当前画布上的内容转换为十六进制的 data-url，getImageData直接将图像转换为 RGBA 数组以供图像处理算法使用，putImageData 将 RGBA 数组转换为图片显示在画布上等等。如果配上 JavaScript 的定时更新（最好用 requestAnimationFrame 而不是 setInterval），则可以产生动画效果。网上还有许多 Canvas 的库，可以让程序员更简便地基于 Canvas 编写属于自己的特效或功能。在这儿我想说一句话：大家的脑洞有多大，Canvas 的能力就有多强~

❺ python tkinter怎么用canvas实现按顺序画图

python简述：

Python是一种解释型、面向对象、动态数据类型的高级程序设计语言。自从20世纪90年代初Python语言诞生至今，它逐渐被广泛应用于处理系统管理任务和Web编程。Python[1]已经成为最受欢迎的程序设计语言之一。2011年1月，它被TIOBE编程语言排行榜评为2010年度语言。自从2004年以后，python的使用率是呈线性增长。

tkinter模块介绍

tkinter模块(“Tk 接口”)是Python的标准Tk GUI工具包的接口.Tk和Tkinter可以在大多数的Unix平台下使用,同样可以应用在Windows和Macintosh系统里.,Tk8.0的后续版本可以实现本地窗口风格,并良好地运行在绝大多数平台中。

由于Tkinter是内置到python的安装包中、只要安装好Python之后就能import Tkinter库、而且IDLE也是用Tkinter编写而成、对于简单的图形界面Tkinter还是能应付自如。

八、显示文字

用create_text在画布上写字。这个函数只需要两个坐标（文字x和y的位置），还有一个具名参数来接受要显示的文字。例如：

>>> from tkinter import*>>> tk = Tk()>>> canvas = Canvas(tk,width=400,height=400)>>> canvas.pack()>>> canvas.create_text(150,100,text='Happy birthday to you')

注：用tkinter只能装入GIF图片，也就是扩展名是.gif的图片文件。

想要显示其他类型的图片，如PNG和JPG，需要用到其他的模块，比如Python图像库。

十、创建基本的动画

创建一个填了色的三角形，让它在屏幕上横向移动：

import timefrom tkinter import*tk = Tk()canvas = Canvas(tk,width=400,height=200)canvas.pack()canvas.create_polygon(10,10,10,60,50,35) ##创建三角形for x in range(0,60): canvas.move(1,5,0) ##把任意画好的对象移动到把x和y坐标增加给定值的位置 tk.update() ##强制tkinter更新屏幕（重画） time.sleep(0.05) ##让程序休息二十分之一秒（0.05秒），然后再继续

三角形横向移动

延伸一下，如果想让三角形沿对角线在屏幕上移动，我们可以第8行为：

import timefrom tkinter import*tk = Tk()canvas = Canvas(tk,width=400,height=400)canvas.pack()canvas.create_polygon(10,10,10,60,50,35) ##创建三角形for x in range(0,60): canvas.move(1,5,5) ##把任意画好的对象移动到把x和y坐标增加给定值的位置 tk.update() ##强制tkinter更新屏幕（重画） time.sleep(0.05) ##让程序休息二十分之一秒（0.05秒），然后再继续

三角形沿对角线移动

如果要让三角形在屏幕上沿对角线回到开始的位置，要用-5,-5（在结尾处加上这段代码）

import timefrom tkinter import*tk = Tk()canvas = Canvas(tk,width=400,height=400)canvas.pack()canvas.create_polygon(10,10,10,60,50,35) ##创建三角形for x in range(0,60): canvas.move(1,5,5) ##把任意画好的对象移动到把x和y坐标增加给定值的位置 tk.update() ##强制tkinter更新屏幕（重画） time.sleep(0.05) ##让程序休息二十分之一秒（0.05秒），然后再继续for x in range(0,60): canvas.move(1,-5,-5) tk.update() time.sleep(0.05)

对角线运动并回到初始位置

十一、让对象对操作有反应

我们可以用“消息绑定”来让三角形在有人按下某键时有反应。

要开始处理事件，我们首先要创建一个函数。当我们告诉tkinter将某个特定函数绑到（或关联到）某个特定事件上时就完成了绑定。

换句话说，tkinter会自动调用这个函数来处理事件。

例如，要让三角形在按下回车键时移动，我们可以定义这个函数：

def movetriangle(event): canvas.move(1,5,0)

这个函数只接受一个参数（event），tkinter用它来给函数传递关于事件的信息。现在我们用画布canvas上的bind_all函数来告诉tkinter当特定事件发生时应该调用这个函数。代码如下：

from tkinter import*tk = Tk()canvas = Canvas(tk,width=400,height=400)canvas.pack()canvas.create_polygon(10,10,10,60,50,35)def movetriangle(event): canvas.move(1,5,0)canvas.bind_all('<KeyPress-Return>',movetringle) ##让tkinter监视KeyPress事件，当该事件发生时调用movetriangle函数

那么我们如何根据按键的不同而改变三角形的方向呢？比如用方向键。

我们可以尝试改下movetriangle函数：

def movetriangle(event): if event.keysym == 'up': canvas.move(1,0,-3) ##第一个参数使画布上所画的形状的ID数字，第二个是对x（水平方向）坐标增加的值，第三个是对y（垂直方向）坐标增加的值 elif event.keysym == 'down': canvas.move(1,0,3) elif event.keysym == 'left': canvas.move(1,-3,0) else canvas.move(1,3,0)

最后代码汇总在一起为：

from tkinter import*tk = Tk()canvas = Canvas(tk,width=400,height=400)canvas.pack()canvas.create_polygon(10,10,10,60,50,35)def movetriangle(event): if event.keysym == 'Up': canvas.move(1,0,-3) ##第一个参数使画布上所画的形状的ID数字，第二个是对x（水平方向）坐标增加的值，第三个是对y（垂直方向）坐标增加的值 elif event.keysym == 'Down': canvas.move(1,0,3) elif event.keysym == 'Left': canvas.move(1,-3,0) else: canvas.move(1,3,0)canvas.bind_all('<KeyPress-Up>',movetriangle) ##让tkinter监视KeyPress事件，当该事件发生时调用movetriangle函数canvas.bind_all('<KeyPress-Down>',movetriangle)canvas.bind_all('<KeyPress-Left>',movetriangle)canvas.bind_all('<KeyPress-Right>',movetriangle)

方向键控制三角形的移动

十二、更多使用ID的方法

只要用了画布上面以create_开头的函数，它总会返回一个ID。这个函数可以在其他的函数中使用。

如果我们修改代码来把返回值作为一个变量保存，然后使用这个变量，那么无论返回值是多少，这段代码都能工作：

>>> mytriangle = canvas.create_polygon(10,10,10,60,50,35)>>> canvas.move(mytriangle,5,0)

我们可以用itemconfig来改变三角形的颜色，这需要把ID作为第一个参数：

>>> canvas.itemconfig(mytrigle,fill='bue') ##把ID为变量mytriangle中的值的对象的填充颜色改为蓝色

也可以给三角形一条不同颜色的轮廓线，同样适用ID作为第一个参数：

>>> canvas.itemconfig(mytrigle,outline='red')

总结做出了简单的动画。学会了如何用事件绑定来让图形响应按键，这在写计算机游戏时很有用。在tkinter中以create开头的函数是如何返回一个ID数字。

已经学习Python两天，最开始是想着是通过觉得用它写个动画或者画个图形比较方便，而且界面美观，比黑洞洞的dos窗口好多了，准备写个程序送个一女孩作为生日礼物（去年答应好的）。经过这两天的学习，我慢慢发觉了Python语言的优点，其最主要的就是易学，而且可以调用各种库。

❻ HTML里面怎样用canvas将一个线性渐变正方形沿水平和垂直方向运动呀

嗯

❼ canvas前端动图如何实现

Canvas是HTML5中的重要组成部分，用于绘制简单的图形，定义路径，创建渐变及应用图像变换，如何用Canvas制作动画也是很多人都有的疑问。

01

什么是动画？我们在绘制动画之前必须要弄清楚什么是动画，一个动画最起码需要哪些基本条件呢？我们可以用一个工具展示动画是什么。这是利用PPT绘制出的一个动画效果

这样我们就通过Canvas做出一个简单的动态图形了

如果你想要学习更多的新知识

如果你想要分享自己的心得

如果你热爱前端渴望提升