zoukankan      html  css  js  c++  java
  • canvas设置线条样式

    canvas设置线条样式

    1. 合法属性和方法

      lineWidth = value           设置线宽
      lineCap = type              设置线端点样式
      lineJoin = type             设置线交合处样式
      setLineDash(segments)       设置虚线
      lineDashOffset = value      设置虚线偏移
      
    2. 设置线宽

      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      
      ctx.lineWidth=1;
      ctx.beginPath();
      ctx.moveTo(50, 50);
      ctx.lineTo(100, 50);
      ctx.stroke();
      
      ctx.lineWidth=2;
      ctx.beginPath();
      ctx.moveTo(50, 60);
      ctx.lineTo(100, 60);
      ctx.stroke();
      
      ctx.lineWidth=3;
      ctx.beginPath();
      ctx.moveTo(50, 70);
      ctx.lineTo(100, 70);
      ctx.stroke();
      
      ctx.lineWidth=4;
      ctx.beginPath();
      ctx.moveTo(50, 80);
      ctx.lineTo(100, 80);
      ctx.stroke();
      
      ctx.lineWidth=5;
      ctx.beginPath();
      ctx.moveTo(50, 90);
      ctx.lineTo(100, 90);
      ctx.stroke();
      
    3. 设置线端点

      ctx.beginPath();
      ctx.lineCap="round";
      ctx.lineWidth=10;
      ctx.moveTo(50, 80);
      ctx.lineTo(100, 80);
      ctx.stroke();
      
      ctx.beginPath();
      ctx.lineCap="butt";
      ctx.lineWidth=10;
      ctx.moveTo(50, 100);
      ctx.lineTo(100, 100);
      ctx.stroke();
      
      ctx.beginPath();
      ctx.lineCap="square";
      ctx.lineWidth=10;
      ctx.moveTo(50, 120);
      ctx.lineTo(100, 120);
      ctx.stroke();
      
    4. 设置线交合

      ctx.beginPath();
      ctx.lineWidth=20;
      ctx.lineJoin="round";
      ctx.moveTo(50, 80);
      ctx.lineTo(150, 120);
      ctx.lineTo(250, 80);
      ctx.stroke();
      
      ctx.beginPath();
      ctx.lineWidth=20;
      ctx.lineJoin="bevel";
      ctx.moveTo(50, 150);
      ctx.lineTo(150, 190);
      ctx.lineTo(250, 150);
      ctx.stroke();
      
      ctx.beginPath();
      ctx.lineWidth=20;
      ctx.lineJoin="miter";
      ctx.moveTo(50, 220);
      ctx.lineTo(150, 260);
      ctx.lineTo(250, 220);
      ctx.stroke();
      
    5. 设置虚线

      var offset = 0;
      
      setInterval(() => {
          offset++;
          if (offset > 16) {
              offset = 0;
          }
      
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.setLineDash([4, 2]);
          ctx.lineDashOffset = -offset;
          ctx.strokeRect(10, 10, 100, 100);
      
      }, 20)
      
  • 相关阅读:
    【2017-4-26】Winform 公共控件 菜单和工具栏
    【2017-4-24】Winform 简单了解 窗口属性
    【2017-4-21】ADO.NET 数据库操作类
    【2017-4-21】ADO.NET 防止字符串注入攻击
    【2017-4-19】ADO.NET 数据库链接,基础增删改
    Vue#条件渲染
    Vue#Class 与 Style 绑定
    Vue#计算属性
    Vue入门笔记#数据绑定语法
    Vue入门笔记#过渡
  • 原文地址:https://www.cnblogs.com/ye-hcj/p/10357405.html
Copyright © 2011-2022 走看看