Canvas绘图

Canvas绘图做为H5的神奇而又高大上的之一存在，它给超文本标记语言的世界装扮了千万缕的色彩~_~，那么下面就来从绘制环境，绘制图像，绘制文本等方面来深入了解它吧。

1.绘图环境

在绘制之前，先需要在使用canvas元素，来指定绘图区域及大小,开始和结束标签中的内容是在浏览器不支持canvas时显示的内容。

<vanvas id="myCanvas" width="900" height="500">Your browser does not support canvas!</canvas>

通过ID获取到canvas元素后，要通过绘图上下文进行开始绘图，即绘图环境。canvas不仅具备基本绘图能力的2D上下文，还有一个名为WebGL的3D上下文。

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

绘制2d上下文环境 ：var contxt = myCanvas.getContext("2d");

绘制WebGL上下文环境：var contxt = myCanvas.getContext("experimental-webgl");

ps:目前支持canvas的浏览器都支持2D上下文及文本API，但对WebGl的支持还不够好

2.绘制图像

如果你想把一幅画绘制到画布上，可以使用drawImage(),这个方法可以传进九个参数，分别是要绘制的图像，源图像的x坐标，源图像的y坐标，源图像的宽度，源图像的高度，目标图像的x坐标，目标图像的y坐标，目标图像的宽度，源图像的高度。这样调用drawImage()方法可以获得更多的控制，可以变换大小，也可以截取源图像的一部分进行显示。除此之外，还可以传入另一个canvas元素做为第一个参数，就可以把另一个画布内容绘制到当前画布上。当操作完成后，可通过toDataURL()方法获得，但是该图像不能来自于其他域，否则会出错。

var image = document.images[0];

context.drawImage(image,10,10);

3.绘制文本

绘地点制文本的主要方法有两个：fillText()和strokeText()，这两个方法都接受四个参数：要绘制的文本字符串，x坐标，y坐标和可选的最大像素宽度，而且这两个方法都以font,textAlign和textBaseline这几个属性为基础，fileText()方法使用fillStyle属性绘制文本，strokeText()用strokeStyle属性为文本描边。

context.font = "bold 14px Arial";

context.textAlign = "center";

context.textBaseline = "middle";

context.fillText("12",100,20);

1.绘图环境

1.绘图环境