canvas绘图小总结

1.canvas绘制步骤

　　①在HTML5页面中添加canvas元素，定义id属性值以接下来调用。

　　②使用id寻找页面中的canvas元素

　　var c=document.getElementById("myCanvas");

　　③通过canvas元素的getContext方法来获取其上下文，即创建context对象，以获取允许进行绘制的2D环境

　　var context=c.getContext("2d");

　　④使用js脚本来进行绘制

　　 context.fillStyle="#f00";

　　context.fillRect(50,25,100,50);

2.绘制直线

（1）canvas绘制直线相关方法　　

　　开始：beginPath() 定义了一个新的路径绘制动作的开始

　　起点：moveTo()

　　终点： lineTo()

　　绘制： stroke() 为所画的线条赋颜色

（2）绘制直线相关属性

　　直线宽度：linewidth　　直线颜色：strokeStyle

　　直线端点样式（线帽）：linecap，属性值为（butt,round,square）

3.绘制弧线和曲线

　　arcTo() 创建介于两个切线之间的弧/曲线

　　quadraticCurveTo() 二次贝塞尔曲线

　　bezierCurveTo() 三次贝塞尔曲线

4.线条的连接样式

　　lineJoin属性，属性值为（miter,round,bevel）

5.canvas绘制简单图形

　　矩形：rect() ，由左上角坐标（x，y）和矩形的宽高（width，height）确定。

　　圆：arc() ，起始角度0，终点2*PI

　　图形颜色填充：fillStyle设置颜色，使用fill()完成填充。

6.绘制阴影

　　阴影颜色：shadowColor　　　　　　　　阴影模糊度：shadowBlur

　　阴影与形状的水平距离：shadowOffsetX　　阴影与形状的垂直距离：shadowOffsetY

　　透明度：globalAlpha：0.0（完全透明）~1.0（完全不透明）

7.绘制渐变

　　①线性渐变

　　创建对象：var grad=context.createLinearGradient(x1,y1,x2,y2);（起点终点）

　　　　上色：addColorStop();

　　②径向渐变：var grad=context.createRadialGradient(x1,y1,r1,x2,y2,r2);（圆心半径1，圆心半径2）

8.绘制图案填充

　　context.createPattern(image,type);

　　type表示平铺类型：repeat /repeat-x /repeat-y /no-repeat

9.绘制图像

　　原始：context.drawImage(image Obj,x,y);

　　指定：context.drawImage(image Obj,x,y,width,height);

　　裁剪：context.drawImage(image Obj,sx,sy,sw,sh,dx,dy,dw,dh);

10.绘制文本

　　①context.fillText(text,x1,y1);

　　②设置字体大小样式

　　　　fond:normal/italic/bold

　　　　fillStyle（颜色）

　　　　strokeText() （文本边缘）

　　③绘制文本对齐

　　　　textAlign属性：start/end/left/right/center

　　④文本度量

　　　　measureText()

11.图形的变换

 1 var canvas = document.getElementById("mycanvas");
 2 var context = canvas.getContext("2d");
 3 var rectWidth=150;
 4 var rectHeight=75;
 5 context.fillStyle="#ff0000";
 6  //把坐标原点移动到canvas中心点
 7 context.translate(canvas.width/2,canvas.height/2);
 8 //顺时针旋转45°
 9 context.rotate(0.25*Math.PI);
10  //纵坐标向上缩小一半
11 context.scale(1,0.5);
12 context.fillRect(-rectWidth/2,-rectHeight/2,rectWidth,rectHeight);

结果如下：

12.图形的组合

 1             var canvas = document.getElementById("mycanvas");
 2             var context = canvas.getContext("2d");
 3             //绘制矩形
 4             context.beginPath();
 5             context.rect(200,20,100,100);
 6             context.fillStyle="blue";
 7             context.fill();
 8 
 9             //context.globalCompositeOperation = "source-over";//目标图像上显示源图像
10             //context.globalCompositeOperation = "source-atop";//只绘制目标图像和新图形与目标图像重叠部分,
11                                                                 // 新图形在原有图形之上
12             //context.globalCompositeOperation = "source-in";//新图像在目标图像之内显示，目标图像是透明的
13             //context.globalCompositeOperation = "source-out";//之外显示，目标图像是透明的
14             context.globalCompositeOperation = "destination-atop";//只绘制目标图像和新图形与目标图像重叠部分,
15                                                                     // 新图形在原有图形下层
16             //context.globalCompositeOperation = "destination-in";
17             //context.globalCompositeOperation = "destination-out";
18             //context.globalCompositeOperation = "destination-over";
19            // context.globalCompositeOperation = "lighter";//显示源图像+目标图像，两图形重叠部分加色处理
20             //context.globalCompositeOperation = "darker";//两图形重叠部分减色处理
21             //context.globalCompositeOperation = "xor";//重叠部分透明
22             //context.globalCompositeOperation = "copy";//只显示源图像
23 
24             //绘制圆
25             context.beginPath();
26             context.arc(320,120,60,0,2*Math.PI);
27             context.fillStyle="red";
28             context.fill();
29

结果如下：

13.图形的裁切

　　使用clip()方法