canvas 绘图

<canvas>元素是HTML5中的绘图元素，通过定义一个画布区域，然后使用javascript动态地在这个区域里面绘制图形，对于2D和3D图形都可以绘制，我们将其分成2D上下文和WebGL两大块内容来一起来学习

<canvas id="draw" width="500" height="400"></canvas>

用canvas 绘制图形时经过以下几个步骤：

1.获取canvas对象.

2.使用canvas对象的getContext方法来获取图形上下文，在draw函数中将参数设为2d.

3.填充与绘制边框 

填充（使用指定样式［颜色、渐变、图像、模式等］填充图形）和描边（图形的边缘画线）分别为fillStyle和strokeStyle，需要注意一点，fillStyle和strokeStyle会被延用至重新设置这两个值！

4.lineWidth用来指定图形边框的线宽。

5.fillStyle和strokeStyle分别指定绘图时填充的颜色 和边框的颜色。

var draw = document.getElementById(‘draw’);
//确定是否支持canvas
if(draw.getContext){
//这样就取得绘图上下文对象的引用，画图便可以开始了！
var context = draw.getContext(‘2d’);

//绘制黑色矩形
context.strokeStyle = “#000”;
context.strokeRect(10,10,50,50);

//绘制描边矩形
context.fillStyle = ‘#0000ff’;
context.fillRect(30,30,50,50);

}

6.绘制矩形

context.fillRect(x,y,width,height)  //填充矩形

context.strokeRect(x,y,width,height)//绘制矩形边框

context.clearRect(x,y,width,height)//擦除指定矩形区域中的图形，使得矩形区域中的颜色变成透明

7.使用路径

绘制除正方形、长方形外的图形

开始创建路径   context.beginPath();

创建图形的路径

路径创建完成后关闭路径  context.closePath();

设定绘制样式，调用绘制方法，绘制路径  context.fillStyle="rgba(255,0,0,1)"

context.strokeStyle="rgba(255,0,0,1)" context.fill() context.stroke()

 

例：

1.context.beginPath();

2.绘制圆形路径

context.arc(x,y,radius,startAngle,endAngle,anticlockwise)

x为起点的横坐标，y为绘制圆形的起点的纵坐标，radius为圆形半径，startAngle为开始角度，endAngle为结束角度，anticlockwise为是否按照顺时针方向绘制 true为顺时针 false 为逆时针

 

绘制直线

moveTo(x,y) 将光标移动到指定坐标点，绘制直线时以这个坐标点为起点

lineTo(x,y) 以moveTo中指定的点为起点，参数中指定的为终点绘制一条直线

 

绘制贝切尔曲线

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

绘制贝切尔曲线需要两个控制点 cp1x cp1y cp2x cp2y分别对应两个控制点的x和y坐标

X为贝切尔曲线的终点横坐标 y为贝切尔曲线的终点纵坐标

 

3.context.closePath();

4.context.fillStyle="rgba(255,0,0,1)"  context.fill()