html 5-canvas直線とポリゴンを描く

線を描くには、次の方法を使用します.

context.moveTo(100,100);
context.lineTo(700,700);//         

グラフィック塗り
context.fillStyle="rgb(183,69,76)"; context.fill();
図形描画

context.stroke();

convasの描画は状態に基づいて描画されていることを理解する必要があります.複数の図形を描画すると、begainPathとclosePathの間に描画コードが配置され、上書きされないようにします.

context.begainPath()
....
context.closePath()

    
    


    
                        
    
    
    window.onload=function() {
        var canvas=document.getElementById('canvas');
        canvas.width=1024;
        canvas.height=768;
        var context=canvas.getContext("2d");
        if(canvas){
            context.moveTo(100,100);
            context.lineTo(700,700);
            context.stroke();
            //....  
        }else{
            alert("            ")
        }

    }