NFH.006-CanvasプレミアムとChart.js

12.16学習経験の共有#
Bruce_Zhuは2016.12.16
一、canvas-パス描画線(直線と折れ線、ポリゴン)を作成する

描画方法

 1）        

   moveTo(x,y);  

 2）    (  )   

   lineTo(x,y);

プロット線のプロパティ

 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  ) ，     

タイル画像var ptn=createPattern(img,type)はタイルオブジェクトを返します.このオブジェクトを描画する画像の塗りつぶし色imgとします.タイル画像type:タイル方式repeat/no-repeat/repeaet-x/repeat-y注意:画像のロードが完了した後、画像を描画する必要があります.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プラグインの学習チュートリアル