H 5新しいラベルcanvasキャンバス

canvasキャンバス
ラベルラベル:webフロントエンド
直接コードをくどくど言う

        canvas     

注意:canvasの幅はラベルでしか設定できません.cssで設定しないでください.設定できないのではなく、設定した値はあなたが設定したものではありません.

まず簡単な三角形

を書きます

    var canvas = document.getElementById('canvas');
    //   
    var ctx = canvas.getContext('2d');
    //     
    ctx.beginPath();
    //     
    ctx.moveTo(0,0);
    //       
    ctx.lineTo(250,250);
    ctx.lineTo(500,0);
    // closePath（）      ，           ，    ；          ，   closePath
    ctx.closePath();
    // （ ）
    //    
    ctx.strokeStyle='blue';
    //      （           ）
    ctx.lineWidth=50;

はctxを充填する.fill();

塗りつぶし色を設定:ctx.fillStyle = 'red';

描画矩形:ctx.storkeRect(x,y,w,h);

塗りつぶし矩形を描く:ctx.fillRect(x,y,w,h);

フィレット

を設定する.

//            （    closePath）
ctx.lineCap='round';
//             
ctx.lineJoin='round';

描画フォント

// ctx.font='50px   ';
//    （         ）
// ctx.textAline='right';//        
// ctx.textBaseline='bottom';//         
// ctx.strokeText('Hello,World',100,100);
// ctx.fillText('Hello,World',100,300,100);

円を描く

/*
      1：   x
      2：   y
      3：    
      4：     ，               
      5：     ，               
      6：     ，true     ，false     
             Math.PI  。 Math.PI/2   90 ；
         n*Math.PI/180  n       
*/
ctx.arc(250,250,200,Math.PI,Math.PI/2,false);
ctx.stroke();

二次ベッセル曲線と三次ベッセル曲線を描く

//    (       )
//  moveTo    ，
//  quadraticCurveTo()        
//  1：    x
//  2：    y
//  3：   x
//  4：   y
ctx.moveTo(0,0);
ctx.quadraticCurveTo(250,500,500,0);
ctx.stroke();

//    (       )
//  1:    1 x
//  2:    1 y
//  3:    2 x
//  4:    2 y
//  5:    1 x
//  6:    1 y
ctx.moveTo(0,0);
ctx.bezierCurveTo(500,0,0,500,500,500);
ctx.stroke();

画画像img

//        canvas ，     image  
var img=new Image();
img.src='images/1.jpg';
img.onload=function (){
    //           ，       
    /*
      ：  1：img;
      2：x；
      3：y；
      4：  width；
      5：  height；
      6：          x；
      7：          y；
      8：              width；
      9：              height；
    */
    // ctx.drawImage(img,10,10);
    // ctx.drawImage(img,10,10,200,200);
    ctx.drawImage(img,10,10,200,200,100,100,200,200);
}

キャンバス

をクリア
キャンバスのクリアは一般的にアニメーションで使用されます

//    
//    ：x,y,w,h
// ctx.clearRect(10,10,200,200);

座標系移動

ctx.translate(x,y);

座標系回転

ctx.rotate(Math.PI/6);

次はcanvasで書いた時計です(わかりやすく書くために少しlow)