HTML5_03之Canvas绘图

1、Canvas绘图——JS绘图：
<canvas id='c1' width='' height=''></canvas>
* Canvas尺寸不能用CSS设置；
c1.height=;
c1.width=;
var ctx=c1.getContext('2d');
常用属性：
ctx.fillStyle='#f00'/gradient;
ctx.strokeStyle='#00f'/gradient;
ctx.lineWidth=;
ctx.font='px sans-sarfi';
ctx.textBaseline='alphabetic';
ctx.shadowBlur='';
常用方法：
绘制矩形：
ctx.fillRect();
ctx.strokeRect();
ctx.clearRect();
绘制文本：
ctx.fillText();
ctx.strokeText();
ctx.measureText(txt).width;
2、Canvas绘图——绘制路径：
作用：①创建选区（clip），对画布内容进行裁剪；
②进行描边（stroke），绘制任意形状的折线；
③进行填充（fill），填充出任意形状的图形；
相关函数：
ctx.beginPath();——开始一条新路径
ctx.arc();——绘制一条椭圆/圆弧/圆路径
ctx.moveTo(x,y);——移动到指定点
ctx.lineTo(x,y);——从上一点到指定点绘制直线
ctx.busierCurve();——绘制贝塞尔曲线
ctx.closePath();——闭合路径
ctx.clip();——基于当前路径进行裁切
ctx.stroke();——基于当前路径进行描边
ctx.fill();——基于当前路径进行填充
3、Canvas绘图——绘制图像：
①图像定位点位于自己左上角；
②绘制：
ctx.drawImage(img,x,y);//原始大小绘制
ctx.drawImage(img,x,y,w,h);//使用指定宽高绘制图像——图像大小缩放
③绘制图像时，必须等待图片异步加载完成：
var img=new Image();
img.src="xx.png";//向服务器异步请求图片
img.onload=function(){
ctx.drawImage(img,x,y,[w],[h]);
}
④图象旋转：
ctx.totate(deg);
⑤旋转轴点——默认坐标轴原点，若以某个固定点旋转，则须平移画布的坐标原点：
ctx.translate(x,y);
4、基于Canvas的图表绘制框架/工具库：
①Chart.js——免费开源，九类图表
②Echart.js——免费，百度提供，中文手册
③FusionChart.js——收费，功能强大