带你了解html5中的canvas
接下来将为大家介绍html5新更新的元素canvas
canvas元素用于在网页上回绘制图形，画布是一个矩形的区域，在该区域内，你可以控制每一个像素，而且canvas拥有很多绘制路径，矩形，圆形，字符以及添加图像的方法。
创建canvas元素
向页面添加canvas元素，且规定元素的id，宽度和高度。
<canvas id="myCanvas" width="200" height="100"></canvas>
<!-- canvas的宽200px,高100px， id为myCanvas -->
通过javascript（简称js）来进行绘制
canvas元素本身是没有绘图能力的，必须使用js来控制。
var myCanvas=document.getElementById("myCanvas")
//通过id元素寻找canvas元素
var ctx=myCanvas.getContext('2d')
//创建context对象，getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
ctx.fillStyle="blue" //填充颜色
ctx.fillRect(0,0,140,70) //fillRect 方法规定了形状、位置和尺寸
ctx.beginPath() //开始新的路径或者重置当前路径
ctx.moveTo(10,10); //画笔起点
ctx.lineTo(150,50); //画笔转折点
ctx.lineTo(10,50); //画笔终点
ctx.strokeStyle="red"; //画笔颜色
ctx.stroke(); //绘制已定义的路线
ctx.clearRect(0,0,150,50)
//清除画布 0起始横坐标，0起始纵坐标，150宽度，50高度
ctx.strokeRect(0,0,150,50) //绘制无填充矩形
转换
transform()重新映射画布上的 (0,0) 位置
rotate()旋转当前绘图.
ctx.translate(400,400);
var timer=setInterval(function(){
//1.定义一个旋转的方法,确定每次时间间隔中要旋转多少弧度
ctx.rotate(0.01*Math.PI);
//2.绘制一个矩形，因为需求要求矩形以中心为轴进行旋转，但是canvas中rotate只能以画布左上角为轴，进行旋转
//因此，只要使矩形的中心和画布的左上角重合就可以了(起点的横纵坐标为矩形宽高的一半)
ctx.strokeRect(-150,-100,400,300);
ctx.clearRect(-150,-100,400,300)
},50);
转换结果如下图所示
font 设置或返回文本内容的当前字体属性
textAlign 设置或返回文本内容的当前对齐方式
fillText() 在画布上绘制“被填充的”文本
strokeText() 在画布上绘制文本，无填充。
ctx.font="20px Georgia"; //字体样式
ctx.font="30px Verdana";
// 创建渐变
var gradient=ctx.createLinearGradient(0,0,myCanvas.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变填色
ctx.strokeStyle=gradient;
ctx.strokeText("WS前端开发",10,90);
还有一些不常用的我就没放上来了，需要了解的请自行百度哟。