什么是canvas？

使用canvas，可以在网页上绘制图像。我们常见的图表类网页、地图类网页上面那些复杂的图像、炫酷的效果，都可以使用canvas来实现。通俗点说，canvas就是画家手中的画板，用js作笔来画出心中的恢弘山河。

canvas拥有多种绘制路径、矩形、圆形、字符以及添加其他图像的方法。

用一个简单栗子来认识它

在网页上绘制一个圆

<canvas id="cvs" width="300" height="300"</canvas>
<script>
    var canvas = document.getElementById('cvs');

//    判断是否支持canvas
    if(canvas.getContext){
        //获取canvas上下文
        var ctx = canvas.getContext('2d');
        //定义一个路径
        ctx.beginPath();
        //画一个圆形路径
        ctx.arc(50,50,50,0,Math.PI*2);
        //定义填充颜色
        ctx.fillStyle = "rgb(160,224,0)";
        //填充圆形
        ctx.fill();
    }else{
        console.info('当前浏览器不支持canvas属性');
    }
</script>

通过上面的示例我就在一个300*300的画布上面，以偏移左上角x轴、y轴各50px的点为圆心，画了一个半径为50px的圆。

效果图-1

看过一个简单的栗子之后，让我们来了解一下canvas常见的一些方法。

常用方法

获取canvas上下文

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

可能有些人会好奇，这里为什么是2d，难道还有3d吗？答案是有的。
比如：WebGL 使用了基于OpenGL ES的3D上下文 ("experimental-webgl") 。
但是我们现在主要把注意力放到2d渲染上下文中。

绘制图像类型
填充——context.fill()
描边——context.stroke()
绘制的样式
填充颜色——context.fillStyle
描边颜色——context.strokeStyle
在样式中，可以有几种表示颜色的方法
- 直接用颜色名称：red green blue
- 使用十六进制值：#eef
- 使用rgb颜色：rgb(1-255,1-255,1-255) rgba(1-255,1-255,1-255,透明度)
绘制路径
绘制路径，就相当于我们定了一个物件的轮廓，然后我们就可以对它进行描边或者填充让它变得可见。
绘制线条——context.lineTo(x,y)
绘制圆弧——context.arc(x,y,radius,startAngle,endAngle,anticlockwise)
我们可以用线条和圆弧来组合各种复杂的形状，然后对它进行填充或描边。但是还有两个要注意，在开始画路径之前，要使用context.beginPath()来定义路径的开始，在结束路径时，要使用context.closePath()来进行路径的闭合。