canvas绘图详解（一）

一、canvas绘图环境

该浏览器不支持canvas元素
在中添加这段代码相当于创建了一块画布，要使用元素，必须为其设置画布大小，写在标签内的内容将在使用的浏览器不支持时显示。想要绘图，还必须获得绘图上下文，

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

二、路径绘制

• moveTo（x,y） 将绘制坐标移到（x,y）,但不进行画线。
  lineTo（x,y）从上一点开始，绘制直线到（x,y）。

效果如图所示：

image.png

如果想连接图形的首尾，绘制一个封闭的图形，有两种做法

1. 再使用context.lineTo(start，end);连接图形的首尾坐标。
2. 使用beginPath()和closePath()也将实现同样的效果。对于实现封闭图形很有用。

       context.beginPath();
       context.moveTo(100,100);
       context.lineTo(500,500);
       context.lineTo(100,500);
       context.closePath();

• arc（x,y,radius,startAngle,endAngle,direction）以（x,y）为圆心，画一条弧线。direction为true为逆时针方向绘制，为false表示为顺时针绘制，如果不进行设定，默认为true。无论顺时针还是逆时针，正右方都为0弧度，正下方为 PI/2,正左方为PI.正上方为PI/2*3;

效果如图所示：

image.png

• rect(x,y,width,height):从点x,y绘制一个矩形
  使用方法和上面的类似，不过多介绍。