zoukankan      html  css  js  c++  java
  • 绘制矩形

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

  • 相关阅读:
    bzoj 3262: 陌上花开
    hdu 5618 Jam's problem again
    bzoj 1176: [Balkan2007]Mokia
    bzoj 2683: 简单题
    Codevs 1080 线段树练习(CDQ分治)
    bzoj 3223: Tyvj 1729 文艺平衡树
    bzoj 1503: [NOI2004]郁闷的出纳员
    bzoj 1208: [HNOI2004]宠物收养所
    bzoj 1588: [HNOI2002]营业额统计
    bzoj 3224: Tyvj 1728 普通平衡树
  • 原文地址:https://www.cnblogs.com/MyUniverse/p/9998723.html
Copyright © 2011-2022 走看看