canvas 基础

canvas是html5新设的元素对象，它的存在就相当于在浏览器窗口内给我们准备出canvas元素的区域的空白画布让我们随意填写，当然，画画的“笔”就是canvas给我们的接口啦。另外canvas是按照我们所设的代码规则按像素将图像画出的，相当于位图。<canvas>默认定义大小为300像素宽150像素高，一般会在canvas标签内设置canvas大小，例如，<canvas width="600" height="200"></canvas>即设置了600*200大小的画布区域。有人会问，如果我不在canvas标签内设置大小，我通过css设置canvas大小会怎样呢？答案是canvas是css设置的那么大，不过是把默认的300*150伸展或压缩到css设置的大小。

canvas只有高级浏览器会支持，如果是低端浏览器怎么办呢？可以在canvas标签内设置提示内容，像这样，<canvas>您的浏览器不支持canvas！</canvas>，这样低端浏览器解析到canvas标签时会把提示内容展示出。

下面具体介绍一下canvas的“画笔”

首先取得canvas上下文内容：

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

var context = canvas.getContext('2d'); //目前就是取canvas的2d上下文

1.实心的矩形

context.fillRect(10, 11, 100, 101);//从(10,11)这个坐标位置开始画，宽度为100，高度为101

如果想画一个粉红色的实心矩形，应该这么做：

context.fillStyle = 'pink';//context.fillStyle 可以设置画笔颜色，设置好之后后面画出的图形颜色就是pink啦（注意只是设置填充的颜色）

context.fillRect(10,11,100,101);

举个栗子，如果想设置画布背景色为blue可以这么来：

context.fillRect(0, 0, canvas.width, canvas.height);

2.线

画一条从(110,150)到(250,75)的直线。

context.beginPath();

context.moveTo(110,150);

context.lineTo(250,75);;//以上几步像用铅笔描了一下路线一样，而且只有我自己能看见别人看不见，“画在心中”

context.lineWidth = 5;

content.stroke();//直线画出来了

如果是想画一个空心的三角形呢？这样来：

context.beginPath();

context.moveTo(110,150);

context.lineTo(250,75);

context.lineTo(75,250);

context.closePath();//线闭合

context.stroke();//三角形画出来了

3.弧

弧的接口是这样的：

context.arc(x,y,radius,startAngle,endAngle,direction);

x,y:为圆心坐标

radius：为半径

startAngle：为相对于x轴的起始弧度

endAngle：相对于x轴的终止弧度

direction:顺时针画还是逆时针画。true为逆时针false为顺时针

例如：如果想画一个第一象限的弧可以这么来：

context.arc(100,100,75,0,(90*Math.PI)/180,true);

如果是想画全圆，可以这么来：

context.arc(100,100,75,0,Math.PI*2);

4.文字

在canvas可以写文字，例如

我要在画布写一句“I like canvas”的红色实心文字

context.fillStyle = 'red';

context.fillText('I like canvas', 100, 101, 102); //在(100,101)这个位置写文字，如果文字的宽度大于102，会自动缩小字体

如果想写空心的问题，可以这么写

context.strokeText('I like canvas', 100, 101, 102);

还可以设置字体：

context.font = '2em Lucida Grande';

context.fillText('I like canvas', 100, 101, 102);

5.canvas元素定位

左上角是(0,0),右上角是(canvas.width, 0)，

左下角是(0, canvas.height)，右下角是(canvas.width, canvas.height)