CSS3 canvas画布的说明

1、canvas说明

圆的周长C＝2×半径×圆周率＝直径×圆周率 圆的周长＝2πr；

圆的面积S=(πr²)

<canvas>元素定义：<canvas id="canvas" width="150" height="150">你的浏览器不支持canvas，请升级浏览器</canvas>

<canvas>创建的固定尺寸的绘图画面开发了一个或多个渲染上下文我们可以通过他们来控制要显示的内容。现在只支持2d，

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

2：绘制方法：
clecrRect(left,top,width,height)清除制定矩形区域，
fillRect(left,top,width,height)绘制矩形，并以fillStyle填充。
fillText（text,x,y）绘制文字；
strokeRect(left,top,width,height)绘制矩形，以strokeStyle绘制边界。
beginPath():开启路径的绘制,重置path为初始状态；
closePath():绘制路径path结束，它会绘制一个闭合的区间，添加一条起始位置到当前坐标的闭合曲线；
moveTo（x，y）：设置绘图其实坐标。
lineTo(x，y);绘制从当前其实位置到x，y直线。
fill（），stroke（），clip（）：在完成绘制的最后的填充和边界轮廓，剪辑区域。
arc（）：绘制弧,圆心位置、起始弧度、终止弧度来指定圆弧的位置和大小；
rect():矩形路径;
drawImage（Imag img）：绘制图片；
quadraticCurveTo():二次样条曲线路径,参数两个控制点；
bezierCurveTo（）：贝塞尔曲线，参数三个控制点；
createImageData,getImageData，putImageData:为Canvas中像素数据。ImageData为记录width、height、和数据 data，其中data为我们色素的记录为
argb，所以数组大小长度为width*height*4，顺序分别为rgba。getImageData为获取矩形区域像素，而putImageData则为设置矩形区域像素；

属性

context.fillStyle=color|gradient|pattern; 设置或返回用于填充绘画的颜色、渐变或模式。（链接）

方法

context.createLinearGradient(x0,y0,x1,y1);方法创建线性的渐变对象。渐变开始x0,y0坐标，渐变结束x1,y2坐标 （链接）

gradient.addColorStop(stop,color);规定 gradient 对象中的颜色和位置。stop介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。addColorStop() 方法与 createLinearGradient() 或 createRadialGradient() 一起使用。(链接)

矩形

context.fillRect(x,y,width,height);（矩形左上角的 x 坐标，矩形左上角的 y 坐标，矩形的宽度，以像素计，矩形的高度，以像素计）方法绘制“已填色”的矩形。默认的填充颜色是黑色。（链接）

 

 

合成

context.globalCompositeOperation="source-in"; 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。源图像 = 您打算放置到画布上的绘图。目标图像 = 您已经放置在画布上的绘图。（链接）

 

 

 

… and so on！
3：坐标变换：
translate（x,y）：平移变换，原点移动到坐标（x，y）；
rotate（a）：旋转变换，旋转a度角；
scale（x，y）：伸缩变换；
save（），restore（）：提供和一个堆栈，保存和恢复绘图状态，save将当前绘图状态压入堆栈，restore出栈，恢复绘图状态； 

canvas的简单HTML模板：

参数说明：

getContext()方法只需要一个参数：绘图环境的类型。在游戏中，我们使用2D类型的绘图环境。 

http://www.w3school.com.cn/tags/html_ref_canvas.asp   HTML 5 Canvas 参考手册

1、HTML5通过调用canvas对象的getContext()方法来获取绘图环境

2、利用HTML5中的Canvas绘制一张笑脸的教程   http://www.cnblogs.com/chenguiya/p/5375637.html