HTML5canvas元素

一、canvas基础知识
1.简介：canvas元素是H5中的一个图形容器，它本身不具备任何行为使用者必须把它与脚本结合起来绘制图形。
2.canvasAPI：使用canvas绘图时并不是直接绘制到屏幕上，而是先画到一个上下文context上，然后再刷新到屏幕上。每个canvas元素都对应一个context对象，并且该对象是惟一的。CanvasAPI定义在这个context对象上，因此需要获取context对象
var canvas = document.getElemntById(“mycanvas”);
if(canvas.getContext){
var ctx = canvas.getContext(“2d”); //参数2D表示生成2d平面图案（3D）
}
二、绘制文本
通过js代码为页面指定事件
window.onload = function(){
var title = “静夜思”;
var canvas = document.getElementById(“mycanvas”); //取得canvas元素
if(canvas.getContext){
var context = canvas.getContext(“2d”); //取得上下文，是一个封装了很多绘图功能的对象
context.font=”blod 30px 微软雅黑”; //设置字体样式
context.strokeStyle=”red”;
context.strokeText(title,250,30);
context.font=” italic 18px 隶书”;
context.fillStyle=”blue”; //设置字体颜色
context.fillText(“床前明月光,”,’200’,160,200);
context.fillText(“疑是地上霜。,”,’200’,200,200);
context.fillText(“举头望明月,”,’200’,240,200);
context.fillText(“低头思故乡。”,’200’,280,200); //context.fillText(text,x,y,maxwidth);
}
}
file：填充整个图形内部 stroke：值绘制图形的外框

三、绘制矩形
1.rect()方法绘制
rect(）用于创建矩形，创建完毕之后需要调用fill()和stroke()方法在画布上实际绘制图形。
context.rect(x,y,width,height);
2.fillRect()方法绘制
绘制被填充的矩形，默认的颜色是黑色。可以使用fillStyle属性来设置用于绘图的颜色、渐变、或者模式
四、绘制路径

五、贝塞尔曲线
上下文对象提供了两种绘制贝塞尔曲线的方法
1.quadraticCurveTo（）方法
使用表示二次方贝塞尔曲线的指定控制点，向当前路径添加点。二次方贝塞尔曲线曲线需要两个点，第一个点是用于贝塞尔计算中的控制点，第二个是曲线的结束点。
基本语法：contex。quadraticCurveTo（cpx，cpy，x，y）；
cpx，cpy表示贝塞尔控制点的x坐标和y坐标；x和y则表示结束点的x坐标和y坐标
2.bezierCurveTo()方法
使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。三次贝塞尔曲线需要三个点：前两个是用于三次贝塞尔计算中的控制点，第三个是曲线的结束点
基本语法bezierCurveTo（cp1x,cp1y,cp2x,cp2y,x,y)
cp1x和cp2y分别表示第一个贝塞尔控制点的xy坐标，cp2x和cp2y分别表示第二个贝塞尔控制点的xy坐标，xy分别表示结束点的xy坐标