国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Canvas繪製矩形

????繪製矩形? context.fillRect(x,y,width,height)? strokeRect(x,y,width,height)

#? ?x:矩形起點(diǎn)橫座標(biāo)（座標(biāo)原點(diǎn)為canvas左上角的，當(dāng)然確切確切地的來(lái)說(shuō)是原始原點(diǎn)，後面寫(xiě)到變形的時(shí)候你就懂了，現(xiàn)在暫時(shí)不用關(guān)係）

???? y:矩形起點(diǎn)縱座標(biāo)

???? width:矩形長(zhǎng)度

???? height:矩形高度

  • 建立HTML頁(yè)面，設(shè)定畫(huà)布標(biāo)籤

  • 寫(xiě)js，取得畫(huà)布dom物件

  • 透過(guò)canvas標(biāo)籤的Dom物件取得上下文

  • 設(shè)定繪製樣式、顏色

  • 繪製矩形，或填入矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<canvas id="demoCanvas" width="500" height="500">
    <p>請(qǐng)使用支持HTML5的瀏覽器查看本實(shí)例</p>
</canvas>
<!---下面將演示一種繪制矩形的demo--->
<script type="text/javascript">
    //第一步：獲取canvas元素
 var canvasDom = document.getElementById("demoCanvas");
    //第二步：獲取上下文
 var context = canvasDom.getContext('2d');
    //第三步：指定繪制線樣式、顏色
 context.strokeStyle = "red";
    //第四步：繪制矩形，只有線。內(nèi)容是空的
 context.strokeRect(10, 10, 190, 100);
    //以下演示填充矩形。
 context.fillStyle = "blue";
    context.fillRect(110,110,100,100);
</script>
</body>

</html>


繼續(xù)學(xué)習(xí)
||
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <canvas id="demoCanvas" width="500" height="500"> <p>請(qǐng)使用支持HTML5的瀏覽器查看本實(shí)例</p> </canvas> <!---下面將演示一種繪制矩形的demo---> <script type="text/javascript"> //第一步：獲取canvas元素 var canvasDom = document.getElementById("demoCanvas"); //第二步：獲取上下文 var context = canvasDom.getContext('2d'); //第三步：指定繪制線樣式、顏色 context.strokeStyle = "red"; //第四步：繪制矩形，只有線。內(nèi)容是空的 context.strokeRect(10, 10, 190, 100); //以下演示填充矩形。 context.fillStyle = "blue"; context.fillRect(110,110,100,100); </script> </body> </html>
提交重置程式碼