NFH.006 - Canvas高级与Chart.js

---

12.16学习经验分享#

Bruce_Zhu于2016.12.16

---

一、canvas-创建路径绘制线条(直线和折线、多边形)

1. 绘制方法

 1）设置起点坐标值 

   moveTo(x,y);  

 2）设置终点(折点)坐标值

   lineTo(x,y);

2. 绘制线条的属性

 1）设置线条的宽度，默认1px

    lineWidth

 2）设置线条端点的形状

    lineCap 

    butt - 平角
    round - 圆角
    square - 正方向

 3）设置两条线交点的形状

    lineJoin

    miter - 尖角 
    round - 圆角
    bevel - 斜角 

 4）miterLimit - 配合lineJoin使用

    lineJoin设置为miter，该属性值设置尖角延伸范围

二、canvas绘制图片

1、 按照图片原大小加载

   drawImage(img,x,y)

   img - 当前加载的图片
   x和y - 图片左上角的位置 

   注意： 必须要保证图片加载完毕(onload事件)后，再绘制图片

2. 平铺图片

   var ptn = createPattern(img,type) 返回一个平铺对象，将这个对象作为将要绘制图像的填充颜色

   img : 平铺的图片
   type: 平铺的方式

   repeat/no-repeat/repeaet-x/repeat-y

   注意：

   必须要保证图片加载完毕(onload事件)后，再绘制图片，createPattern也要等到图片加载完毕后执行

三、切割图片

按照创建路径使用
clip()

四、 画布方法

1、 scale(x,y); - 缩放
x - 水平方向上的缩放
y - 初值方向上的缩放

  context.scale(sx,sy);
  
  context.fillRect(x,y,width,height);
  
  sx:让x和width相对于画布左上角进行缩放
  sy:让y和height相对于画布左上角进行缩放
  
    两次scale在一个会产生叠加效果

2、translate(x,y) - 重新映射画布上的（0,0）位置

  context.translate(tx,ty);
  
  tx和ty改变了矩形的x和y的参考点

3、rotate(); 旋转画布

   degrees * Math.PI / 180;

4、save() 保存当前画布属性、状态

5、resotre() 恢复画布属性状态

六、Chart.js插件的学习教程