首页 > 代码库 > HTML5_03之Canvas绘图

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="http://www.mamicode.com/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绘图