让自己也能使用Canvas
时间： 11:00:10
&&&& 阅读：657
&&&& 评论：
&&&& 收藏：0
标签： 是 HTML5 新增的元素，可使用JavaScript脚本来绘制图形。例如：画图，合成照片，创建动画甚至实时视频处理与渲染。
，除了一些骨灰级浏览器IE6、IE7、IE8等，大部分现代浏览器都能支持。
一、属性与方法
&canvas& 看起来和 &img& 元素很相像，唯一的不同就是它并没有 src 和 alt 属性。实际上，&canvas& 标签只有两个属性&& 和。
&canvas id="strick" width="150" height="150"&&/canvas&
还有些默认的属性，id、style等
1. (in DOMString contextId)
canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。这个方法是用来获得渲染上下文和它的绘画功能。
contextType中可选的参数有&2d&、&webgl&、&webgl2&、&bitmaprenderer&。
如果是&2d&，就会返回
对象。如果是&webgl&，就会返回
contextAttributes属性会根据 &2d& 或 &webgl& 会需要不同的参数。
var canvas = document.getElementById(‘strick‘);
var ctx = canvas.getContext(‘2d‘);
2. (in optional DOMString type, in any ...args)
返回一个data: URL，将canvas中的图片编码成字符串形式，有多种格式选择，type参数的默认值为image/png。
曾做过一个图片合成的功能，就使用到了这个功能。这里要注意一个&&。
就是嵌入的图片是跨域的，那么就不能使用这个方法。在《》做过简单的分析。
3. (in Function callback, in optional DOMString type, in any ...args)
返回一个（binary large object）对象。Blob代表了一段二进制数据，就是一个包含只读原始数据的类文件对象。
在《》曾做过简单的介绍。
二、绘制2D图形
这里绘制的是2D图形，会用到& 对象中的属性或方法。
在MDN上面有个基础教程《》，覆盖面蛮全的。
1）坐标空间
画布的起点为左上角，这个起始点通过方法
可以自定义，例如做旋转缩放等操作。
上图所示，canvas的坐标轴与普通的坐标轴是相反的。
所以顺时针是正值，逆时针是负值。
2）绘制形状
矩形是canvas支持的唯一一种原生的图形绘制。要画其他形状，就需要通过绘制路径实现。绘制矩形提供了。
路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。有和的方法。
操作过程大致为4步，先创建路径起始点，再画出路径，然后闭合路径，最后填充。
1. 简单图形
下图中是些简单的图形，两个三角形中有一个是旋转了画布的，逆时针画的半圆，三个圆圈与一个半圆组成的笑脸，用贝塞尔曲线画的对话气泡，可以。
2. 复杂图形
在CSS中，边框、字体等都能设置宽度、大小、颜色等，高级点的还有阴影、渐变、rgba等。
在canvas中也有相应的操作，、、、、、。
有网友画了头灰太狼，非常逼真，可以，通过查看源码，里面用到的就是beginPath、moveTo、quadraticCurveTo等路径相关的方法或属性。
3）使用图片
canvas可以对图片进行、、、、等操作。
a. 简单的合成
现在有些网站会让你DIY做张海报，然后分享到朋友圈。前段时间做了个简易的海报，仅仅是将图片合成在一起，没有做涂鸦等操作，详细的介绍可以查看《》
b. 高级点的合成
高级点的，能够输入自定义的文字，用到了上面所说的绘制形状的一些概念，在看源码的时候，发现引用了脚本&&，解决canvas 在高清屏下绘制图片变模糊。
除了基础的操作，还有高级的，获取图片中某一像素的RGBA，然后修改其中的R、G、B或A的值，来修改颜色或透明度。
例如鼠标移动获取RGBA值，将彩色照变成黑白照，等。
第一张图片是获取像素值，第二张图是变灰。
除了能操纵图片，canvas还能操纵视频，也就是&video&标签。
4）变换矩阵
CSS3中的transform有个矩阵的概念，旋转、平移、扭曲、缩放等都可以用矩阵来实现。关于CSS3的动画可以参考《》
canvas中有一个()方法，实现旋转，但其实旋转的是canvas画布，并不是旋转画出来的那个图形。
如果用()方法的话，就可以实现旋转图形。这边有个对比实例，可以。
2D渲染的上下文矩阵如下，可以忽略最后一行：
2D渲染的坐标计算如下，关于计算过程可以研究下线性代数，简单点说就是a和x、y、1分别相乘。
rotate与skew的矩阵计算会涉及到中的正弦、余弦还有正切。
//scale()对应的矩阵 下面是CSS3中的写法，对应的方法是CanvasRenderingContext2D.transform
matrix(sx,0,0,sy,0,0);/*sx和sy分别对应X轴和Y轴的缩放比率*/
//rotate()对应的矩阵
//在JS中&对应的是弧度转换公式为 弧度= 2 * PI / 360 * 角度
matrix(cos&,sin&,-sin&,cos&,0,0);
//skew()对应的矩阵
//&y对应的是Y轴的弧度 &x对应的是X轴的弧度
matrix(1,tan(&y),tan(&x),1,0,0)
矩阵计算还会涉及到很多其他的数学知识，例如，我基本都已经忘记了，囧，都得重新查看了。
有个在线编辑matrix的网站，。
5）相关的计算公式
a.&基础公式
JavaScript中有两个反正切函数，(ratio)与(y, x)。
第一个方法返回一个&-pi/2&到 pi/2&弧度之间的数值，第二个方法返回一个 -pi 到 pi 之间的数值。
b.&角度与弧度的互转
在JavaScript中，三角函数等用的是弧度，例如Math.sin、Math.cos等方法；旋转是用角度。所以两者之间是需要换算的。
radians是弧度，degrees是角度
c.&两点间的距离
使用了直角三角形的勾股定理。坐标轴中的P1与P2，就相当于公式中的A与B。
三、canvas动画
要实现动画就需要用JavaScript实现很多物理概念。
关于canvas动画可以参考两本书《》和《》。pdf和源码都已经分享了出来。
1）速度向量
速度（speed）是速度向量（velocity）中的一部分，速度向量还包括方向。
用vx表示x轴上的速度向量，有vy表示y轴上的速度向量。还可以表示角度旋转，用vr表示。
vx为正数表示向右，负数表示向左。vy为正数表示向下，负数表示向上。
下图就是一个向右移动的球，vx=1，详细代码可以。
假设物体以1个像素的速度向45&方向移动，那么vx和vy可以通过余弦与正弦获取。
速度和方向映射成一个直角三角形。
vx = Math.cos(angle)*
vy = Math.sin(angle)*
上图就是经过计算后的角速度示例。
速度向量改变的是物体的物理位置，加速度改变的是速度向量。
下面的图片与速度向量中的gif内容是相同的，只是每次循环给vx加了0.1个值。
处理边界，有多种选择，移除、置回边界内、屏幕环绕、反弹回边界内等。
左图是置回边界内，右图是反弹回边界内的效果。
一个比较简单的实现是，设置一个friction（摩擦力变量，一个小于1的数字），将这个数与vx和vy分别相乘，获取新的值。
这两个值会越来越小，最终停止。
除了上面几种基础的动画，还有些高级的动画，缓动、弹动、碰撞检测等。
四、canvas的优缺点
1. 在呈现图像、文本和动画的时候，由于 canvas 不存在与解析 HTML 和维护分层文档模型有关的开销，因此，在 canvas 中这些任务总是要比在 HTML 中快。
2. 可以实现一致的、跨平台的呈现。例如浏览器的transform属性，不同浏览器可能就需要使用自己独特的前缀。
3. 画出来的图形可以直接保存为 .png 或者 .jpg的图形。
4. 最适合于画光栅图像（如游戏和不规则几何图形等），编辑图片还有其他基于像素的图形操作。
1. 由于 canvas 里面没有dom节点，当某个元素需要执行交互事件(如click)的时候只能是通过坐标来判断。
2. 没有实现动画的API，你必须依靠定时器和其他事件来更新 canvas。
3. 对文本的渲染支持是比较差，例如自动换行。canvas中也不存在超链接的概念。
4. 由于在 canvas 上以编程方式显示的文本其实就是位图，因此搜索爬行器将完全忽略文本。文本内容也无法被屏幕阅读器识别。
参考资料：
&&国之画&&&& &&
版权所有 京ICP备号-2
迷上了代码！使用Adobe FLASH CC制作Canvas动画 - 推酷
使用Adobe FLASH CC制作Canvas动画
flash可以导出canvas动画，大大缩短制作动画所需要的时间。它是一个可视化IDE，可以让我们写少很多代码。做出来的动画，可以更加精确。同时，可以通用使用帧脚本中的 Javascript，为资源添加交互性。
新建HTML5 Canvas项目
舞台大小修改为：600x600 ( 这里可以根据设计稿调整所需要的舞台大小 )
是指每秒钟放映或显示的帧或图像的数量，这个数值设置越大，动画越快，但同时也是性能消耗大户。这里我们设置为36
文件 & 导入 & 导入到库
快捷键Ctrl + L或者窗口菜单下 & 库
从资源库中把资源拖到舞台进去,通过移动拖拽的形式进行布局
图形与影片剪辑
我们可以将单独的动画，放到一个独立的影片剪辑里，这样可以更好的控制动画。几个独立的剪片剪辑，可以组成一个完整的动画。
当我们把图片从资源库拖到舞台时，它这个时候，只是普通的位图，并不能做补帧动画，所以我们必须把它转换成元件。
图形 由矢量图或者是位图组成。
影片剪辑 包含在动画影片中的影片片段，有自己的时间轴和属性。具有交互性，是用途最广、功能最多的部分。
下面制作以飘动的钱，做个例子说明
选择位图，右键 & 转换为元件，这个时候，弹出一个对话窗口，我们首先选择“影片剪辑”，保存。双击进入刚才创始的影片剪辑，这个时候，由于刚才我们只是把位图转成了影片剪辑，但实际上，它里面，仍然是一个位图，所以并不能做动画操作。所以我们需要在影片剪辑里，把图片转换了“图形”。
上面已经把图片转成图形元件，所以我们现在需要时间轴某个地方中插入关键帧。这里我们在30,60帧处插入关键帧。然后在30帧处，移动元件的位置，然后在每个关键帧的中间右键，选择“创建传统补间”。速度可以通过删除或者增加两个关键帧的补间动画时间长度来控制。
动作播放控制
如果我们希望动画可以连续从头再播放，可以在动画的最后一帧插入一个空白关键帧，打开动作面板，然后写上
this.gotoAndPlay(0)
即可回到第一帧重新播放，如果希望停止动画，则
this.stop();
如果希望跳到某帧去播放
this.gotoAndPlay(n)
如果希望跳到某帧并停止
this.gotoAndStop(n)
文件 & 发布设置
循环时间轴( 表示是否循环整个动画 )
覆盖HTML( 第一次发布时可以选上，如果对html有修改，记得把这个选项去掉,否则会对文件进行覆盖操作 )
资源导出选项
图像( 是否导出雪碧图 )
javascript命名空间( 基本上不需要修改 )，这几个属于全局变量，可以在发布后的js文件中再修改。
最终会生成一个html文件和一个js文件
生成的html文件
框架自带的preloadjs,可以轻松管理资源预加载，它提供了相关api可以进行loading等操作。
&!DOCTYPE html&&html&&head&&meta charset=&UTF-8&&&title&people&/title&&script src=&/easeljs-0.8.1.min.js&&&/script&&script src=&/tweenjs-0.6.1.min.js&&&/script&&script src=&/movieclip-0.8.1.min.js&&&/script&&script src=&/preloadjs-0.6.1.min.js&&&/script&&script src=&people.js&&&/script&&script&var canvas, stage, exportRfunction init() { canvas = document.getElementById(&canvas&); images = images||{}; var loader = new createjs.LoadQueue(false); loader.addEventListener(&fileload&, handleFileLoad); loader.addEventListener(&complete&, handleComplete); loader.loadManifest(lib.properties.manifest);}function handleFileLoad(evt) { if (evt.item.type == &image&) { images[evt.item.id] = evt. }}function handleComplete(evt) { exportRoot = new lib.people(); stage = new createjs.Stage(canvas); stage.addChild(exportRoot); stage.update(); createjs.Ticker.setFPS(lib.properties.fps); createjs.Ticker.addEventListener(&tick&, stage);}&/script&&/head&&body onload=&init();& style=&background-color:#D4D4D4&& &canvas id=&canvas& width=&600& height=&620& style=&background-color:#FFFFFF&&&/canvas&&/body&&/html&
生成的js文件
生成的动画配置及脚本都在这个js文件里面，如果需要，可以手动修改相关数据。
(function (lib, img, cjs, ss) {var // shortcut to reference prototypes// library properties:lib.properties = { width: 600, height: 620, fps: 36, color: &#FFFFFF&, manifest: [
{src:&images/bigband.png&, id:&bigband&},
{src:&images/Bitmap1.png&, id:&Bitmap1&},
{src:&images/body.png&, id:&body&},
{src:&images/eye1.png&, id:&eye1&},
{src:&images/eye2.png&, id:&eye2&},
{src:&images/face1.png&, id:&face1&},
{src:&images/face2.png&, id:&face2&},
{src:&images/face3.png&, id:&face3&},
{src:&images/hair.png&, id:&hair&},
{src:&images/hand2.png&, id:&hand2&},
{src:&images/hand3.png&, id:&hand3&},
{src:&images/hand4.png&, id:&hand4&},
{src:&images/index30.png&, id:&index30&},
{src:&images/index302.png&, id:&index302&},
{src:&images/index40.png&, id:&index40&},
{src:&images/index5.png&, id:&index5&},
{src:&images/shadow.png&, id:&shadow&} ]};// symbols:(lib.bigband = function() { this.initialize(img.bigband);}).prototype = p = new cjs.Bitmap();p.nominalBounds = new cjs.Rectangle(0,0,295,538);(lib.Bitmap1 = function() { this.initialize(img.Bitmap1);}).prototype = p = new cjs.Bitmap();p.nominalBounds = new cjs.Rectangle(0,0,543,577);(lib.body = function() { this.initialize(img.body);}).prototype = p = new cjs.Bitmap();p.nominalBounds = new cjs.Rectangle(0,0,521,242);(lib.eye1 = function() { this.initialize(img.eye1);}).prototype = p = new cjs.Bitmap();p.nominalBounds = new cjs.Rectangle(0,0,73,58);(lib.eye2 = function() { this.initialize(img.eye2);}).prototype = p = new cjs.Bitmap();p.nominalBounds = new cjs.Rectangle(0,0,72,35);(lib.face1 = function() { this.initialize(img.face1);}).prototype = p = new cjs.Bitmap();p.nominalBounds = new cjs.Rectangle(0,0,297,368);...// stage content:(lib.people = function() { this.initialize(); // people this.instance = new lib.peoplemc(); this.instance.setTransform(295,312.5); // qpmask (mask) var mask = new cjs.Shape(); mask._off = true; mask.graphics.p(&EgpUgqAMBU1AAAMAAABaIMhU1AAAg&); mask.setTransform(278.5,308.1); // qp this.instance_1 = new lib.qpmc(); this.instance_1.setTransform(291.5,263.5); this.instance_1.mask = this.addChild(this.instance_1,this.instance);}).prototype = p = new cjs.Container();p.nominalBounds = new cjs.Rectangle(263,31.5,617,905.5);})(lib = lib||{}, images = images||{}, createjs = createjs||{}, ss = ss||{});var lib, images, createjs,
附上最终效果
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致您所在的位置： &
HTML 5开发的在线雪碧图片合成工具
HTML 5开发的在线雪碧图片合成工具
HTML5研究小组
支持图片文件拖拽；支持生成png图片与css文件；支持两种自动排列的模式；放大镜功能；磁力吸附对齐功能；工作状态导出功能，可以方便导出文件，在下一次操作通过拖放改文件来恢复工作状态。
Css Sprite，有时也称为雪碧图、精灵图，是每一个前端开都会遇到的问题，也是常见的小图片加载优化手段。相信各位同学都清楚其原理，具体就不赘述了。
之前一直有动机利用html5实现一个合成雪碧图的工具，方便小项目的快速开发，减少一些诸如开photoshop、fireworks等工具来合图的机械劳动，最近终于抽出时间将构思实现。
在线使用：
使用介绍：
github地址：
Go!Png介绍：
目前实现的功能如下：
支持图片文件拖拽；支持生成png图片与css文件；支持两种自动排列的模式；放大镜功能；磁力吸附对齐功能；工作状态导出功能，可以方便导出文件，在下一次操作通过拖放改文件来恢复工作状态（包括图片数据跟参数设置）；支持Mac（Chrome） ：）
使用说明：
1.拖拽图片小文件到操作区域，如下图：
2.输入类属性设置与目标图片、css文件生成，如下图
3.生成的css文件是可以通过改变css模版来定制的
使用的模版函数是John Resig的Micro-Templating，可以用的变量有：
x 图片的x坐标；y 图片的y坐标；w 图片的宽度；h 图片的高度；name 图片文件的名称（不带后缀）；absolute_path 绝对路径（自定义）；relative_path 相对路径（自定义）
x、y、w、h的解释如下图：
css模版的设置操作如下图：
4.生成目标图片、css后可以直接下载
点击download按钮即可完成下载：
5.工作状态导出
这个功能是可以将你目前的工作状态，包括图片的数据（图片、图片位置排列），参数设置（包括主页的参数设置与css模版设置），全部导出成一个文件，下次利用此文件便可复原工作状态。
导出如下图：
导入如下图：
即可复原：
原文链接：
【编辑推荐】
【责任编辑： TEL：（010）】
关于的更多文章
本书的重点是使用HTML5、CSS3 及JavaScript 等Web 标准来为iOS
随着云计算、物联网、大数据、移动互联网的大发展，你应该知道这些。
掌握一门技术，首要的是掌握其基础。笔者从事.NET相关
再过十几天很多同学又要爬楼梯睡觉，早上七点起床，晚
8月第二周，开发者们每月必看的编程语言排行榜如期而
本书是对《网管员必读―网络管理》第1版的全面重写，因为书中所涉及的两个主要网络操作系统都已升级。本书介绍的是Windows Serve
51CTO旗下网站