一、canvas要学习的内容

　　1、canvas绘制基本图型

　　2、使用路径的方法，绘制多边型和圆型

　　3、渐变图型、图型的缩放、图型的组合、绘制阴影

　　4、在画布中绘制图像、制作图像、平铺图像、裁剪图像

　　5、在画布绘制文字、给文字加边框

　　6、如何保存及恢复绘图状态，在画布中制作简单的动画方法

小整理

1、默认canvas尺寸：300 x 150

2、设置宽高，要在行间设置

<canvas ></canvas>

3、当绘制一个方块1px边线，浏览时会出现两个像素的边线，是因为绘制的像素点会向两侧扩散0.5个像素，浏览时0.5会变成1加一起就两像素

　　解决方法：oContext.strokeRect(20.5, 20.5, 150, 100);

注意：执行canvase时需要在文档加载完后在加载js文件，否则会提示没有context()方法。

二、canvas属性：

　　var oContext = canvas.context("2d");

　　1、fillStyle：填充颜色  oContext.fillStyle = "#eeeeff";

　　2、storkeStyle：边框颜色 oContext.storkeStyle = "#ccc",

　　3、lineWidth：边框线的宽度 oContext.lineWidth = 1;

　　4、shadowColor：阴影颜色 oContext.shadowColor = "#000";

三、canvas属性和方法：

　　一、颜色和阴影

　　属性：

　　　　1、fillStyle：设置填充颜色

　　　　2、strokeStyle：边线的颜色

　　　　3、shadowColor：阴影颜色

　　　　4、shadowBlur：阴影模糊

　　　　5、shadowOffsetX：阴影距水平的距离

　　　　6、shadowOffsetY：阴影距垂直的距离

　　　　7、globalAlpha：全局透明度，可以指定画布上绘制的内容的透明度

　　方法：

　　　　1、createLinearGradient(开始点的x，开始点的y，结束点的x，结束点的y) ：创建线性渐变（用在画布内容上）

　　　　2、createRadialGradient(x0, y0, r0, x1, y1, r1)：创建镜像渐变

　　　　3、addColorStop(0， color)： 规定渐变对象中的颜色和停止位置，第一个参数是开始点和结束点，是0-1之间的浮点数，第二个参数是颜色

　　　　4、createPattern(图片， 重复方向) ：在指定的方向上重复指定的元素 createPattern(img,"repeat")

　　　　5、moveTo(x, y)：线的起始位置

　　　　6、lineTo(x,y)：线的结束位置  ,当画第二线的时候只需要加结束位置的x,y轴

　　　　7、stroke()：绘制线条

　　　　8、fill()：填充颜色，如果是画线时没有合并路径那会用Fill()来填充会自动将路径合并，并填充颜色

　　　　9、fillRect(x, y, w, h)：画一个矩形

　　　　10、strokeRect(x, y, w, h)：绘制矩形线条

　　　　11、clearRect(x, y, w, h)：消除矩形

　　　　9、toDataURL()：返回以data:为前缀的64编码表示的图像数据

　　　　　　　　　　var oContext = oCanvas.getContext("2d");

　　　　　　　　　　oSetPic = oContext.canvas.toDataURL('image/png');

　　　　　　　　　　console.log(oSetPic);　　// data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAEsCAYAAAAfPc2WAAAQo0lEQ…BAgAABArGAwIpBjSNAgAABAgQICCw3QIAAAQIECBCIBf4DOKmXLbCHP3gAAAAASUVORK5CYII=

　　二、绘制线条

　　属性：

　　　　1、lineCap：返回线条的结束端样式

　　　　　　　　butt 默认。向线条的每个末端添加平直的边缘。
　　　　　　　   round 向线条的每个末端添加圆形线帽。
　　　　　　　　square 向线条的每个末端添加正方形线帽。

　　　　2、lineJoin：拆线的折点处的样式 

　　　　　　　　bevel 创建斜角。
　　　　　　　　round 创建圆角。
　　　　　　　　miter 默认。创建尖角。

　　　　3、lineWidth：线条粗细

　　　　4、miterLimit ：最大斜角度长

　　三、绘制矩形

　　　　1、rect(x,  y,  width,  height)：创建矩形

　　　　2、fillRect(x,  y,  width,  height)：绘制被填充矩形

　　　　3、storkRect(x,  y,  width,  height)：绘制矩形，无填充

　　　　4、clearRect(x,  y,  width, height)：在给定的矩形内清除像素

 1 <canvas id="canvas1" width="400px" height="75px"></canvas>
 2 <script type="text/javascript">
 3     window.onload = function(){
 4         showCanvase("canvas1", 400, 75);
 5     }
 6     // 绘制矩形
 7     function showCanvase(oId, w, h){
 8         var canvas = document.getElementById(oId);
 9         var context= canvas.getContext('2d');
10 
11         context.fillStyle = "#fff";
12         context.strokeStyle = "#ccc";
13         context.lineWidth = 1;
14         context.fillRect(0, 0, w, h);
15         context.strokeRect(0, 0, w, h);
16     }
17 </script>

　　四、路径

　　　　1、moveTo（x, y）：绘制直线起点的坐标

　　　　2、lineTo(x, y)：绘制直线终点的坐标

　　　　3、fill()：填充当前绘制

　　　　4、beginPath()、closePath()：开始和结束一路径

　　　　5、storke()：绘制定义的路径

　　　　6、clip()：从原始画布剪切任意形状和尺寸的区域

-----------------------------------------------------------------------------------------------------

四、使用路径

　　1、开始创建路径，beginPath();

　　2、创建图形的路径，arc(x, y, 圆形半径，开始的角度， 结束角度， 是否按顺时针方向绘制ture为顺)

　　3、路径创建完成后，关闭路径closePath();

　　4、设定绘制样式，调用绘制方法，绘制路径fileStyle

六、画线moveTo和lineTo

 1 <canvas id="canvas1" width="400px" height="76px"></canvas>
 2 <script type="text/javascript">
 3     window.onload = function(){
 4         showCanvase("canvas1", 400, 76);
 5     }
 6     // 绘制矩形
 7     function showCanvase(oId, w, h){
 8         var canvas = document.getElementById(oId);
 9         var context= canvas.getContext('2d');
10         // 背景矩形
11         context.fillStyle = "#fff";
12         context.strokeStyle = "#ccc";
13         context.lineWidth = 1;
14         context.fillRect(0, 0, w, h);
15         context.strokeRect(0, 0, w, h);
16 
17         // 绘制两条线
18         for(var i=1; i<3; i++){
19             context.beginPath();
20             context.lineWidth = 1;
21             context.moveTo(0, h/3 * i);       // moveTo线的起始位置x,y轴
22             context.lineTo(w, h/3 * i);        // lineTo线的结束位置x,y轴
23             context.stroke();
24         }
25     }
26 </script>

七、绘制渐变图形

　　1、绘制线性渐变

　　　　createLinearGradient(xStart, yStart, xEnd, yEnd);

二、IE下使用excanvas.js之后动态创建的canvas不支持getContext的解决方法

1 var canvas=document.createElement(”canvas”);
2 if(canvas.getContext){
3     alert(”support getContext()”);
4 }

1 var els = doc.getElementsByTagName(”canvas”);
2 for (var i = 0; i < els.length; i++) {
3     if (!els[i].getContext) {
4         this.initElement(els[i]);
5     }
6 }    

1 $(function(){
2     var canvas=document.createElement(”canvas”);
3     document.body.appendChild(canvas);
4     if($.browser.msie){
5         canvas=window.G_vmlCanvasManager.initElement(canvas);
6     }
7     if(canvas.getContext){alert(”support”);}
8 });