canvas是HTML5新增的一个html标签，通过该标签可以绘制一些很炫的图形，游戏、图表、地图都是使用canvas 来完成的。通过对canvas的学习，来简单的进行总结一下，方便日后查看，主要记录一下绘制矩形，三角形，直线，圆弧、曲线、文字、图片等。同理在iOS中调用UIView的drawRect:方法也要以进行绘制，实现思路其实都差不多，这里主要是用JavaScript来整理。

1.创建画布

绘制所有图形时，需要在画布上进行，创建画面流程主要包括以下3步：
a.创建canvas标签

<canvas id="canvas" width="300" height="300">

其中width，height属性可以设置画面的宽和高。如果不设置，默认的宽度和高度分别为300px和150px。
b.获取canvas对象

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

c.获取上下文

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

绘制图形时，都是通过获取到的ctx来对象相应的方法来完成绘制的功能，设置图形的颜色、字体大小、线条的粗细，都是使用ctx来进行绘制。

2.绘制直线

绘制直接是通过使用moveTo和lineTo两个方法来完成。
context.moveTo(x, y);
绘制直线的点起。x,y为坐标。
context.lineTo(x, y);
用于连接上一个点。如果没有调用moveTo，将以lineTo设置的第一个点做为起点。如下是设置一根直线的代码：

  this.drawLine = function () {
            ctx.moveTo(50,50);
            ctx.lineTo(200,200);
            ctx.stroke();
        }

绘制直线.png
代码中的stroke是对路径进行描边，如果不调用该方法，线条将无法实现，以后无论绘制什么图形，该方法是必须的。

图形基本属性

绘制图形时，可以通过context来绘制图形的一些基本属性，主要包括描边的宽度、颜色、阴影、模糊度、填充样式、字体大小、文字对齐方式等等。下面先介绍一些常用的设置，其余的等到后面用到的时候再做详细的介绍。

a.设置描边宽度

绘制图形时，可以设置lineWidth的值来设置描边的宽度，默认为1px。如下为设置描边的宽度为5。

ctx.lineWidth = 5;

b.设置描边颜色

使用strokeStyle属性可以绘制描边的颜色，strokeStyle的属性值可以是颜色值，也要以是gradient渐变对象，甚至可以是图片。

//设置颜色
ctx.strokeStyle = 'red';

c.设置阴影

通过使用shadowColor设置阴影的颜色，默认为透明黑。使用shadowOffsetX设置阴影的水平偏移大小，使用shadowOffsetY设置阴影的垂直偏移大小。如下所示为设置线条的阴影：

ctx.shadowColor = 'blue';
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = -5;

d.设置模糊度

使用shadowBlur可以设置模糊度，默认为0，模糊度需要跟阴影一起来设置，如下所示设置模糊度为10：

ctx.shadowColor = 'blue';
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = -5;
ctx.shadowBlur = 10;

模糊度.png

e.设置线条端点样式

使用lineCap可以设置线条端点的样式，默认为buzz，round设置两端为圆角，squar设置两端为直角。如下所示为设置round的效果：

ctx.lineCap = 'round';

lineCap.png

f.设置线条转角样式

通过设置lineJoin的值，可以设置线条连接点转角的样式，默认值为miter,round可以设置转角为圆形，,bevel设置转角为平头。

ctx.lineJoin = 'round';//转角设置为圆形

g.设置虚线

使用setLineDash可以设置虚线，主要是通过传递一个数组，数组中包括两个值，第一个为实线的长度，第二个为虚线的长度，如下所示：

ctx.setLineDash([5,10]);
ctx.moveTo(50,100);
ctx.lineTo(250,100);
ctx.stroke();

3.绘制矩形

绘制矩形有三个方法，分别为rect(),fillRect(),strokeRect()。

a.rect()

该方法仅仅是绘制路径，绘制完后，还需要使用stroke()方法进行描边，如果需要填充，还需调用fill()方法，调用rect()方法传入4个参数，分别为x坐标，y坐标，宽度、高度如下所示：

ctx.rect(50,50,200,200);
 ctx.stroke();

矩形.png

b.strokeRect()

使用该方法可以不用调用stroke()而直接显示绘制的图形，如下所示：

ctx.strokeRect(50,50,200,200);

c.fillRect()

使用该方法可以不用调用fill()而直接绘制填充的矩形，如下所示：

ctx.fillRect(50,50,200,200);

4.绘制圆弧

canvas中绘制弧线有两个方法，分别是arc和arcTo，arc可以根据角度来绘制圆弧，而arcTo是根据两个点和一个半径来绘制弧线，主要用于给路径添加一个圆弧。

a.arc()

使用arc绘制圆弧时，需要传递圆心点的x,y坐标，半径，起始角度，结束角度、绘制方法。如下所示：

var ctx = document.getElementById('canvas').getContext('2d');
ctx.arc(100,100,50,0,360 * Math.PI/180);
ctx.stroke();

圆.png

a.arcTo()

使用arc绘制圆弧时，需要传递控制点的x,y坐标和圆弧的半径，如下所示：

ctx.moveTo(20,20);
ctx.arcTo(50,50,150,10,30);
ctx.arcTo(150,150,250,100,60);
ctx.stroke();

弧线.png

5.绘制贝赛尔曲线

绘制贝赛尔曲线主要是通过quadraticCurveTo和bezierCurveTo来绘制，quadraticCurveTo相比bezierCurveTo少了一个控制点，使用贝赛尔曲线可以绘制出各种复杂的曲线图形。下面以绘制为例子来使用绘制贝赛尔曲线的方法。

var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.translate(300,300); //设置中心点
    ctx.beginPath();
    ctx.moveTo(0,-100);
    ctx.bezierCurveTo(120,-300, 300,-100, 200,50);
    ctx.lineTo(0,250);
    ctx.lineTo(-200,50);
    ctx.bezierCurveTo(-300,-100, -120,-300, 0,-100);
    ctx.closePath();
    ctx.stroke();
    ctx.fillStyle="#ff0000";
    ctx.fill();

心形.png

6.绘制文字

使用strokeText()和fillText()用于绘制文字，strokeText()绘制描边，fillText()填充文字。

   // 文字样式
    ctx.font = '50px STHeiti, SimHei';
    //文字对齐方式
    ctx.textAlign = 'center';
    // 文字先描边
    ctx.lineWidth = 3;
    ctx.strokeStyle = 'red';
    ctx.strokeText('这是文字信息', 200, 120);
    // 再填充
    ctx.fillText('这是文字信息', 200, 120);

文字.png
个人博客