Canvas-線の描画、画像の描画と切断、キャンバスの方法

パス描画線の作成

    
    
    
        var context = document.getElementById("canvas").getContext("2d");
        
        //            
        context.beginPath();
        context.strokeStyle = "yellow";
        //  moveTo    
        context.moveTo(20,20);
        //  lineTo    /  
        context.lineTo(100,100);
        context.lineTo(30,10);
        
        //  lineWidth       
        context.lineWidth = 20;
        //   lineCap           butt -     round -      square -    
        context.lineCap = "square";
        //               miter -     round -     bevel -   
        context.lineJoin = "miter";
        //          miterLimit -   lineJoinde miter  
        context.miterLimit = 100;
        //closePath()          
        //context.closePath();
        
        //    ，      stroke，  fill  
        context.stroke();

    

画像の描画とカット

    
    
    

//    
        /*var context = document.getElementById("canvas").getContext("2d");

        //         
        //var img = document.createElement("img");
        //img.src = "class.jpg";
        
        var img = new Image();
        img.src = "class.jpg";

        //         
        img.width = 200;
        img.height = 200;
        
        //          
        img.onload = function  () {
            //    ,           
            //drawImage(img,x,y)  img -          x y -          
            context.drawImage(img,4,14)
        }*/
        
//    
        //var ptn = createPattern(img,type)         ，                    img :        type:      

        var context = document.getElementById("canvas").getContext("2d");
        var img = new Image();
        img.src = "class.jpg";
        img.onload = function  () {
            //      
            var ptn = context.createPattern(img,"repeat");
            context.fillStyle = ptn;
            context.fillRect(0,0,400,400);
        }
    

//    
    
        var context = document.getElementById("canvas").getContext("2d");
        var img = new Image();
        img.src = "class.jpg";
        img.onload = function  () {
            context.drawImage(img,0,0);
        }
        //    beginPath()
        context.beginPath();
        //    
        context.arc(192/2,168/2,80,0,2*Math.PI);
        //    ，     clip()
        context.clip();
     

キャンバス方法(Canvas Method)、パンと回転のスケール(Scale Pan and Rotate)

1.scale(x,y); -   
  x -         
  y -         
  context.scale(sx,sy)
  context.fillRect(x,y,width,height)
  sx:    x width   
  sy:    y height   
  
               

2.translate(x,y) -         （0,0）  
  x，y         

3.rotate();     

   degrees * Math.PI / 180;
   
   degrees          ，        

4.save()         、  

5.restore()         

  
    
    
    
        var context = document.getElementById("canvas").getContext("2d");
        context.fillStyle = "chocolate";
        //  ，x，y，width，height       
        //x width            
        //y height            
        //context.scale(0.5,0.5);
        
        //translate             
        //       ，    （0,0）
        //context.translate(50,50)
        
        //      ，        ，    translate x y
        /*
         *          
         * 1.   translate        
         * 2.                 ，    x y    translate x y，           
         * 3.  rotate       
        */
        context.translate(200,200)
        context.rotate(45*Math.PI/180);
        context.fillRect(-100,-100,200,200);