html5中canvas繪製矩形

cherishSpring發表於2016-07-27
HTMLCanvas
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>canvas的例子(矩形)</title>

    </head>
    <body>
        <canvas id="myCanvas" width="700" height="300"></canvas>
        
        <!--
            context是一個封裝了很多繪圖功能的物件，canvas元素繪製影象的時候有兩種方法，
                context.fill()   //填充
                context.stroke()  //繪製邊框
            
            style:在進行圖形繪製前，要設定好繪圖的樣式
                context.fillStyle  //填充的樣式
                context.strokeStyle  //邊框樣式
                
            context.lineWidth  //圖形邊框寬度
            
            顏色表示：英文名，十六進位制，rgb,rgba(1-255,1-255,1-255,透明度)
            
            繪製矩形：
                context.fillRect(x,y,width,height)  
                context.strokeRect(x,y,width,height)
            
            
        -->
        <script type="text/javascript">
            var canvas=document.getElementById("myCanvas");
            var context=canvas.getContext('2d');
            
            //預設填充黑色 fillStyle=black
            context.fillRect(0,0,100,100);
            
            //預設黑色邊框strokeStyle
            context.strokeRect(100,100,100,100);
            
            //設定純色
            context.fillStyle="chartreuse";
            context.strokeStyle="blue";    
            context.fillRect(0,200,100,100);
            context.strokeRect(300,100,100,100);
        
            //設定透明度，在0-1之間，值越低越透明
            context.fillStyle="rgba(255,0,0,0.1)";
            context.strokeStyle="rgba(100,124,0,0.7)";
            context.fillRect(200,200,100,100);
            context.strokeRect(500,100,100,100);
            
            context.fillStyle="cornflowerblue";
            context.fillRect(200,0,100,100);
            
            context.fillStyle="fuchsia";
            context.fillRect(400,0,100,100);
            
            context.fillStyle="darkorange";
            context.fillRect(400,200,100,100);
            
            context.fillStyle="cadetblue";
            context.fillRect(600,0,100,100);
            
            context.fillStyle="crimson";
            context.fillRect(600,200,100,100);
            
            context.strokeStyle="darkgray";
            context.strokeRect(0,0,700,300);
            
            //清除矩形區域
            context.fillStyle="aliceblue";
            context.clearRect(150,50,400,200);
        </script>
    </body>
    </html>

相關文章