用HTML5的canvas标签画虚线

深藏阁楼爱情的钟 2021-09-14 09:26 713阅读 0赞

原生代码

  1. function drawDashLine(ctx, x1, y1, x2, y2, dashLength){ 
  2.       //ctx 声明的canvas对象
  3.       //x1,y1,x2,y2 起终点坐标
  4.       //dashLength设置虚线中每一段的长度
  5.       var dashLen = dashLength === undefined ? 5 : dashLength,
  6.       xpos = x2 - x1, //得到横向的宽度;
  7.       ypos = y2 - y1, //得到纵向的高度;
  8.       numDashes = Math.floor(Math.sqrt(xpos * xpos + ypos * ypos) / dashLen); 
  9.       //利用正切获取斜边的长度除以虚线长度，得到要分为多少段;
  10.       for(var i=0; i<numDashes; i++){
  11.          if(i % 2 === 0){
  12.              ctx.moveTo(x1 + (xpos/numDashes) * i, y1 + (ypos/numDashes) * i); 
  13.              //有了横向宽度和多少段，得出每一段是多长，起点 + 每段长度 * i = 要绘制的起点；
  14.           }else{
  15.               ctx.lineTo(x1 + (xpos/numDashes) * i, y1 + (ypos/numDashes) * i);
  16.           }
  17.        }
  18.       ctx.stroke();
  19.     }

发表评论

表情：
评论列表 （有 0 条评论，713人围观）

还没有评论，来说两句吧...

相关阅读

    相关 html5 canvas 标签

    anvas标签有两大作用，一是与 2d 的汇合，二是与3d的汇合，其中3d处使用的是 webgl 注意：webgl的y轴正方向由窗口的下方往上，而2d canvas的...

    桃扇骨桃扇骨/ 0 赞/ 104 阅读

    相关 html5 canvas画云

    使用函数画出天空的云层图像： ![云层][SouthEast]y 主要使用到的是数学的圆与弧度之间转换关系： 代码如下

    亦凉亦凉/ 0 赞/ 727 阅读