1. 程式人生 > >繪製矩形

繪製矩形

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>繪製矩形</title>
  </head>
  <body>
    <canvas id="drawing" height="500" width="500">A drawing of something.</canvas>
    <script type="text/javascript">
    var drawing = document.getElementById("drawing")
    if(drawing.getContext)
    {
      var context = drawing.getContext("2d")

      context.strokeStyle.lineCap = "square"
      //繪製紅色矩形


      context.fillStyle = "#ff0000";
      context.strokeStyle = "black"
      context.fillRect(10,10,60,60);
      context.strokeRect(10,10,60,60);

      //繪製半透明的藍色矩形
      context.strokeStyle = "red"
      context.fillStyle = "rgba(0,0,255,0.5)";
      context.fillRect(30,30,50,50);
      context.strokeRect(30,30,50,50);

      //context.fiilRect的第一個和第二個引數代表著以畫布的上面為x座標,左邊為y座標的x,y座標的值


      context.clearRect(40,40,20,20)
      //第一個和第二個引數表示的是座標,第三個和第四個表示的是長寬的大小

      // context.beginPath();
      context.lineWidth = 10;//線條的寬度
      context.lineCap = "round";//線條在最後面的位置
      context.moveTo(90,60);//表示線條的末端的位置
      context.lineTo(200,20);//表示線條前端的位置
      context.stroke();//表示畫圖

      }
   </script>
  </body>
</html>