夕颜的专栏

Canvas历史 　　canvas是一个新的HTML元素，这个元素可以被脚本语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做动画。canvas最先在苹果公司(Apple)的Mac OS X Dashboard上被引入，而后被应用于Safari。后面被采用成为HTML5标准规范的一部分。这个元素的引入带来了非同凡响的影响：从此，浏览器原生支持图形绘制与动画了。can

Canvas & SVG & DOM 　　Canvas与SVG都是2D绘图的利器，除此之外，使用CSS、DOM也可以实现某些性状的绘制，而且在动画中，也都可以使用这些技术实现动画效果。这里就简单比较一下这些技术。 •canvas：canvas是以画像素的形式画出图形，它没有shape和vector的概念。所以就没有对象去接受事件，它只是去绘制像素点。这是缺点，也是优点。 •SVG：SVG是基于v

前面的例子都是使用图片或者图形来绘图，这是相对高级的API，而且所有的操作和变换都是针对“网格坐标系”的。除此之外，canvas还支持直接操作每个像素(全部的，或者部分的)；毋庸置疑，这些操作是针对“像素坐标系”中的像素的，这些操作完全不受变换矩阵、阴影效果、全局透明度设置、裁剪路径、组合效果的影响，因为这些所有的效果都是针对“网格坐标系”的。操作完以后再放回canvas中，可以实现一些有趣的效果。

知识准备 - 坐标系　　在真正开始总结变换之前，我们需要先了解一下canvas的相关坐标系知识。“像素坐标系”：在HTML中，我们会设置canvas的属性：width和height，它们是以像素为单位的，它们描述了canvas最终的呈现区域，我形象称之为“像素坐标”(自创，不是很贴切，行家别见笑)，这个坐标系原点在canvas的左上角，这个坐标系当canvas创建完成以后，就不会变了(当然了，修改w

canvas只支持一种基本形状——矩形，所有其它形状都是通过一个或多个路径组合而成，甚至是基本的矩形也可以通过路径组合成。 一、设置画笔属性 　　设想我们生活中画图的样子，我们首先是选取合适的颜料和笔，一样的道理，在canvas中画图同样也是根据需要，不断的去设置当前使用的颜色和线条类型。 设置当前使用的颜色 　　任何封闭的图形都是有轮廓部分和填充部分组成。设置当前的颜色也是分两部分设置：