canvas学习总结(一)

Canvas（画布）是html5新增的一个重要的技术！web应用中包括移动端app中canvas应用场景很多。canvas依靠javascript绘制出精美的图形元素。在html5的游戏开发中增加华丽的渲染。以下几次文档中会对html5的核心技术做学习总结。我的参考来自均来自dev.w3c.org、www.w3school.com.cn/html5和网上一些翻译资料。

文档中主要对canvas几个核心的api进行学习和演示。

Part1：canvas规范

1. 了解canvas接口元素

Canvas的接口元素表示实现canvas接口规范定义的绘图方法和属性的元素。Html5中表示为<canvas></canvas>。

1. 绘图上下文（Drawing context）

Canvas定义了2d上下文的方式，定义接口为CanvasRenderingContext2D。所谓2d上下文可以理解为一个以左上角为(0,0)的笛卡尔坐标平面。

 

为了在canvas上绘图必须要先获得一个绘图上下文的引用。用法为：

Context.canvas.getContext(contextId)

该方法传入一个contextId，当前必须指定为2d，返回一个canvas元素。这个canvas元素在页面上表示为一个待绘制的区域。

对于这个2d上下文的接口中所有的方法中对无限循环小数和NaN类型的参数都将被忽略（canvas-api）。

1. Canvas状态

每个上下文都包含一个绘画状态的堆。包括：

1. 当前：transformation matrix;
2. 当前：clipping region;
3. 当前的属性：strokeStyle，fillStyle,globalAlpha,

lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX，shadowOffsetY, shadowBlur,shadowColor, globalCompositeOperation, font, textAlign,textBaseline

context.restore()//弹出堆最上面保存的绘图状态

context.save()//在堆上保存当前的绘图状态

Part2：转换/变形接口

1. 介绍

转换(变形)的api有5个分别为：

Context.scale(x,y)—控制缩放

Context.rotate(angle)—控制旋转

Context.translate(x,y)—控制canvas原点的偏移

Context.transform(a,b,c,d,e,f)—矩阵变换，其实很容易理解。我们把一张图片理解为由许多个点组成，每个点都有个坐标（x,y）,该方法就是将一个坐标通过矩阵相乘计算出新的坐标，点的动态变化就会产生动态渲染的效果。计算过程如下：

 

Context.setTransform(a,b,c,d,e,f)—重置并创建新的变换矩阵，和transform 联合使用。

http://www.w3school.com.cn/tags/canvas_settransform.asp

1. 例子

一、缩放与旋转效果图：

 

这里说明下canvas下加载图片的方法：

在js里如果加载一张图片，通过如下方式实现：

Var bird = new Image();

bird.src = “image/bird.png”;

bird.onload = function(){

context.drawImage(bird, x, y, width, height);

…

};

DrawImage方法将图片显示在canvas中，如果显示多张，则在onload方法里多次调用drawImage。

 

二、利用transform方法制作图片镜像效果图：

 

 

这种镜像效果也可以通过使用rotate实现。在此不再细说。如果是垂直镜像则cxt.transform(-1,0,0,1,0,0);

以上的例子只是借用已有的图像，其实canvas-api也具有强大的图形绘制的api，包括线条、简单图形、复杂图形（paths）。

除此外canvas-api还可以控制图形的样式，包括颜色、风格、阴影等。

结合window.setInterval可以实现一些简单的动画。

以上内容会在后续文档中出现。