canvas元素的总结

前言：最近在学习html5的新增属性。一些语义化的标签，和canvas。今天简单总结一下canvas标签的使用。

1. 创建画布
2. 绘制矩形
3. 绘制圆形
4. 绘制文字
5. 保存文件

1、创建画布

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

2、绘制矩形

window.onload=function(){
var canvas=document.getElementById("mycanvas");
var context=canvas.getContext("2d");
context.fillStyle="#ccc";
// 绘制实心矩形
context.fillRect(0,0,300,300);
// 绘制空心的矩形
context.strokeStyle="red";
context.strokeRect(300,300,300,300);

简单总结：
首先获取到id为mycanvas的元素；
然后创建context对象;
然后定义（实心，空心）绘制颜色;
最后使用fillRect（x,y,width,height）或者strokeRect（）绘制;

3、绘制圆形

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.closePath();
/*绘制空心圆*/
ctx.stroke();
/*绘制实心圆*/
ctx.fill();

简单总结：
首先是获取到id为mycanvas的元素；
然后是获取context对象；
开始绘制之前使用beginPath（）；
绘制函数arc（x,y,r,0,2*Math.PI）;
结束绘制使用closePath（）；
使用stroke（）或者fill（）绘制；

4、绘制文字

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
/*实心*/
ctx.fillText("Hello World",10,50);
/*空心*/
ctx.strokeText("Hello World",10,50);

简单总结：
前两步同上；
设置文字的大小和字体；
开始绘制，使用fillText（text,x,y）或者strokeText（）；

5、保存文件

window.location = canvas.toDataURL('image/png');