HTML5_03之Canvas绘图

标签：服务   html5   san   移动   ext   图片异步加载   直线   ima   .sh   

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——收费，功能强大

HTML5_03之Canvas绘图

标签：服务   html5   san   移动   ext   图片异步加载   直线   ima   .sh   

原文地址：http://www.cnblogs.com/Jupiter258/p/6058761.html