canvas的使用

原本也不想学过多的HTML5,但是最近确实有点闲，也不知道学什么，去图书馆也就随便看看。也就只看看它是如何使用的。

它是HTML5提供来画图，它的使用也不算是太麻烦，就将他们记下来，以后没事了看看。

1.画图步骤：获取画布、设置环境、画图

2.canvas提供一个标签，然后其它的操作都是在js中完成。

3.画图

　(1)标签

<canvas height="800px" width="800px" id="canvas" style="background:#9CC" id="canvas"></canvas>

在页面中就这一句，其他的都是在js中完成，获取到一个documnet对象。

（2）获取画布

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

（2）设置环境

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

（3）画一条线段

 cx.lineWidth=10;  //这是线的宽度
 cx.strokeStyle="#ff9900"///设置颜色
 cx.moveTo(20,20);//从哪里开始画
cx.lineTo(100,20);//画的长度
cx.stroke();//开始画,将线划出来

（4）画一个圆

cx.closePath();//关闭画笔，多个路径会连在一起，所以需要开始，画完之后结束路径
 cx.beginPath();
cx.lineWidth=10;
cx.fillStyle="rgb(255,0,0)";
//cx.arc(横,纵，半径，角度1，角度2，正画，还是反画);
cx.arc(200,50,23,0,200,false);
cx.stroke();
cx.fill();
cx.closePath();

画笔宽度、颜色，是最近的一次，设置值，可以重新设置就可以了；

(5)画长方形（一）

cx.beginPath();
cx.rect(300,300,200,200);//设置起点， 长，宽
cx.stroke();
cx.closePath();

画长方形实心（二）

cx.beginPath();
cx.strokeRect(300,150,100,100);
cx.fill();
cx.closePath();

画长方形（三）推荐的使用方法

cx.beginPat
cx.fillRect(300,200,100,100);
cx.closePath();

（6）写入字体

cx.font="40px 黑体";   //注意顺序
cx.fillText("我是kweep",20,300);  //内容，大小

空心

cx.lineWidth=1;
cx.strokeText("我是kweep",40,340);

（7）画入一个图片

var img = new Image();
img.src="路径";
cx.drawImage(img,20,370,230,306);//开始位置，图像的大小，不然会强制缩进的。

（8）画三角形

cx.beginPath();
cx.moveTo(300,500);
cx.lineTo(300,600);
cx.lineTo(400,500);
cx.closePath();
cx.stroke();

画实心的

cx.beginPath();
cx.moveTo(300,500);
cx.lineTo(300,600);
cx.lineTo(400,500);
cx.closePath();
cx.fill();

注意：先关闭，在画图