绘制矩形

<!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>

posted @ 2018-11-21 23:56  Myuniverse  阅读(269)  评论(0编辑  收藏  举报