Html5 Canvas笔记(2)-Canvas绘图

用Canvas API绘图，需要画图形的边线并设置内部区域填充，边线英文语法对应stroke，填充对应fill，在后面我们会频繁看到这2个英文单词的出现。Canvas API内置的形状绘图函数比较少，可以完成绘制矩形Rect、弧形Arc，也可以画贝塞尔曲线bezierCurver、quadraticCurve。下面我们一个一个的来说。

画线-Line

 function drawScreen(){
     context.strokeStyle='black';
     context.lineWidth=10;
     context.lineCap='square';
     context.beginPath();    //开始绘制路径
     context.moveTo(20,0);
     context.lineTo(100,0);
     context.closePath();    //结束绘制路径
 }

lineCap属性：用于定义线条、路径、边框线端点。

butt：默认值，端点是垂直于线段边缘的平直边缘；
round：端点是在线段边缘处以线宽为直径的半圆；
square：端点是在线段边缘处以线宽为长、以一半线宽为宽的矩形；

lineJoin属性：定义两条线相交产生的拐角。

miter：默认值，在连接处边缘延长相接；
bevel：连接处是一个对角线斜角；
round：连接处是一个圆；

lineWidth属性：线宽，默认值为1.0。

strokeStyle属性：定义线和形状边框的颜色和样式。

矩形-Rect

 function drawScreen(){
     context.fillStyle='#000000';        //设置图形填充样式
     context.strokeStyle='#ff00ff';      //设置图形线框样式
     context.lineWidth=;                //指定线宽
     context.fillRect(,,,);      //填充矩形区域
     context.strokeRect(,,,);      //描绘矩形边框
     context.clearRect(,,,);     //清空矩形区域
 }

fillRect(x,y,width,height)：在位置(x,y)绘制宽width，高height的填充矩形

strokeRect(x,y,width,height)：在位置(x,y)绘制宽width，高height的矩形外框

clearRect(x,y,width,height)：从位置(x,y)开始清除宽width，高height的矩形区域，使其透明

注：一定要注意大小写的区别，javascript中是区分大小写的，一旦代码中输入的属性名、方法名或变量名等大小写输入错误，会导致运行错误；

弧线-Arc

 function drawScreen(){
     context.beginPath();
     context.strokeStyle="black";
     context.lineWidth=5;
     context.arc(100,100,20,0,(Math.PI/180)*270,false);
     context.stroke();

     context.moveTo(0,0);
     context.lineTo(100,200);
     context.arcTo(350,350,100,100,20);
     context.closePath();
 }

arc(x,y,radius,startAngle,endAngle,anticlockwise)：

(x,y)：圆心坐标；
radius：圆弧半径；
anticlockwise：画圆弧的方向,true表示逆时针,false表示顺时针；
startAngle,endAngle：圆弧的起始角度与结束角度；

arcTo(x1,y1,x2,y2,radius)：

(x1,y1)：圆弧的起点位置坐标；
(x2,y2)：圆弧结束位置坐标；

贝塞尔曲线-bezierCurver、quadraticCurve

bezierCurver：链接到W3C相应内容

quadraticCurve：链接到W3C相应内容