我们来看看canvas怎么绘制虚线,主要用到的方法是setLineDash和lineDashOffset属性,下面一一分析。

ctx.setLineDash

ctx.setLineDash(arr);
arr数组参数,用于描述虚线当中实线的长度和间隙的长度.这个参数分两种情况:

  1. 第一种情况,当arr数组元素的个数为偶数。比如ctx.setLineDash([10,20]),绘图程序会按照实线10px,间隙20像素--实线10px,间隙20像素--......这样的方式循环下去.

    function drawDashLine(ctx){
              ctx.lineWidth = 4;
              ctx.strokeStyle = 'green';
              ctx.beginPath();
              ctx.setLineDash([10, 20]);
              ctx.moveTo(20, 50);
              ctx.lineTo(500, 50);
              ctx.stroke();
    }

    实际效果:

    canvas教程

    如果你把参数改成[10,20,30,40],ctx.setLineDash([10,20,30,40]),效果如下:

    canvas画虚线

    只是由之前的2段变成了4段一组,实线10像素,间隙20像素,实线30像素,间隙40像素--实线10像素,间隙20像素,实线30像素,间隙40像素--......循环下去。

    2.第二种情况,当arr数组元素的个数为奇数的时候,setLineDash会自动将数组元素重复一次,形成偶数个参数。比如ctx.setLineDash([10,20,30]),会被重复成ctx.setLineDash([10,20,30,10,20,30]),为什么会这样做?

    因为如果不重复一次,下一次循环,实线会贴着实线继续画,而不是实线+间隔这种形式,但是我们绘制虚线的目的是实线+间隔循环下去。

    如图:

    canvas虚线

ctx.getLineDash 方法

setLineDash相对应的方法,用于获取获取绘制虚线的线段和间距参数的方法。

function drawDashLine(ctx){
          ctx.lineWidth = 4;
          ctx.strokeStyle = 'green';
          ctx.beginPath();
          ctx.setLineDash([10,20,30]);
          ctx.moveTo(20, 100);
          ctx.lineTo(400, 100);
          ctx.stroke();
}
        
$(function (){
       var c=document.getElementById("my_canvas");
       var ctx=c.getContext("2d");

       drawDashLine(ctx)
       console.log(ctx.getLineDash()); // [10,20,30,10,20,30]
});

ctx.lineDashOffset

这个属性是设置虚线偏移量,这个偏移是相对应原本虚线位置的,原本虚线位置类似坐标原点。但是需要注意,负值向右偏移,正值向左偏移。

渝ICP备20006974号-2