• 绘制矩形


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

  • 相关阅读:
    iOS下JS与OC互相调用(三)--MessageHandler
    在xcode6中使用矢量图(iPhone6置配UI)
    UITextField增加textDidChange回调功能
    IOS开发之格式化日期时间(转)
    ios中将事件同步到系统日历
    xcode中一些便捷用法@literals简写
    JavaScript
    fuzz for test of the Net::HTTP::GET
    perl6 中将 字符串 转成十六进制
    Net::HTTP 一次添加 cookie, body 发送post请求
  • 原文地址:https://www.cnblogs.com/MyUniverse/p/9998723.html
Copyright © 2020-2023  润新知