canvas绘图小总结

1.canvas绘制步骤

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

　　<canvas id="myCanvas" width="600" heigth="400"></canvas>

　　②使用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.图形的变换

　

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

结果如下：

　　

12.图形的组合

            var canvas = document.getElementById("mycanvas");
            var context = canvas.getContext("2d");
            //绘制矩形
            context.beginPath();
            context.rect(200,20,100,100);
            context.fillStyle="blue";
            context.fill();

            //context.globalCompositeOperation = "source-over";//目标图像上显示源图像
            //context.globalCompositeOperation = "source-atop";//只绘制目标图像和新图形与目标图像重叠部分,
                                                                // 新图形在原有图形之上
            //context.globalCompositeOperation = "source-in";//新图像在目标图像之内显示，目标图像是透明的
            //context.globalCompositeOperation = "source-out";//之外显示，目标图像是透明的
            context.globalCompositeOperation = "destination-atop";//只绘制目标图像和新图形与目标图像重叠部分,
                                                                    // 新图形在原有图形下层
            //context.globalCompositeOperation = "destination-in";
            //context.globalCompositeOperation = "destination-out";
            //context.globalCompositeOperation = "destination-over";
           // context.globalCompositeOperation = "lighter";//显示源图像+目标图像，两图形重叠部分加色处理
            //context.globalCompositeOperation = "darker";//两图形重叠部分减色处理
            //context.globalCompositeOperation = "xor";//重叠部分透明
            //context.globalCompositeOperation = "copy";//只显示源图像

            //绘制圆
            context.beginPath();
            context.arc(320,120,60,0,2*Math.PI);
            context.fillStyle="red";
            context.fill();
    

结果如下：

　　

13.图形的裁切

　　使用clip()方法