Use html5 to implement the dotted line effect code-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

Use html5 to implement the dotted line effect code

零下一度

Apr 22, 2017 pm 02:14 PM

html5 has been out for a long time, but I have only recently started to come into contact with it. HTML5 provides many built-in functions that can achieve many functions, such as drawing line segments, drawing rectangles, drawing circles, drawing arcs, etc. However, HTML5 does not provide the function of drawing dotted lines. If you want to draw curves on canvas, it will take a little effort.

There are two ways to realize the function of drawing dotted lines:

Method one is to write a separate function, and just call this curve when you want to draw a curve.

function drawDashLine(context , x, y, x2, y2, dashLength)
{
     
    <pre style="font-family: 宋体; font-size: 9pt; background-color: rgb(255, 255, 255);"><span style="white-space:pre">  </span>dashLength=dashLength === <span style="color:#660e7a;"><strong>undefined</strong></span>?<span style="color:#0000ff;">5</span>:dashLength;
<span style="color:#000080;"><strong><span style="white-space:pre">   </span>var </strong></span><span style="color:#458383;">deltaX </span>= x2-x;
<span style="color:#000080;"><strong><span style="white-space:pre">   </span>var </strong></span><span style="color:#458383;">deltaY </span>= y2-y;
<span style="color:#000080;"><strong><span style="white-space:pre">   </span>var </strong></span><span style="color:#458383;">numDashs </span>= <span style="color:#660e7a;"><strong>Math</strong></span>.<span style="color:#7a7a43;">floor</span>(<span style="color:#660e7a;"><strong>Math</strong></span>.<span style="color:#7a7a43;">sqrt</span>(<span style="color:#458383;">deltaX</span>*<span style="color:#458383;">deltaX</span>+<span style="color:#458383;">deltaY</span>*<span style="color:#458383;">deltaY</span>)/dashLength);
<span style="white-space:pre">    </span>
<span style="color:#000080;"><strong><span style="white-space:pre">   </span>for</strong></span>(<span style="color:#000080;"><strong>var </strong></span><span style="color:#458383;">i </span>=<span style="color:#0000ff;">0 </span>;<span style="color:#458383;">i</span><<span style="color:#458383;">numDashs</span>;<span style="color:#458383;">i</span>++)
<span style="white-space:pre">    </span>{
   <span style="white-space:pre">     </span>context[<span style="color:#458383;">i</span>%<span style="color:#0000ff;">2</span>===<span style="color:#0000ff;">0</span>?<span style="color:#008000;"><strong>&#39;moveTo&#39;</strong></span>:<span style="color:#008000;"><strong>&#39;lineTo&#39;</strong></span>](x+(<span style="color:#458383;">deltaX</span>/<span style="color:#458383;">numDashs</span>)*<span style="color:#458383;">i</span>,y+(<span style="color:#458383;">deltaY</span>/<span style="color:#458383;">numDashs</span>)*<span style="color:#458383;">i</span>);
<span style="white-space:pre">    </span>}
<span style="white-space:pre">    </span>context.<span style="color:#7a7a43;">stroke</span>();

Copy after login

}

When you need to draw a dotted line, just call this method directly. But some people may need to implant this function directly into html5 to facilitate calling it at any time. This is also feasible, but it is only for your own use.

Method 2, as mentioned above, this method can be directly implanted into HTML5 as a function of canvas

CanvasRenderingContext2D.prototype.dashedLine = function(x,y,x2,y2,
            dashArray)
    {
        var temp = 0.1;
        if (!dashArray)
            dashArray = [ 10, 5 ];
        var dashCount = dashArray.length;
        this.moveTo(x + temp, y + temp);
 
        var dx = (x2 - x), dy = (y2 - y);
        var slope = dx ? dy / dx : 1e15;
        var distRemaining = Math.sqrt(dx * dx + dy * dy);
        var dashIndex = 0, draw = true;
        while (distRemaining >= 0.1 && dashIndex < 10000)
        {
            var dashLength = dashArray[dashIndex++ % dashCount];
            if (dashLength == 0)
                dashLength = 0.001; // Hack for Safari
            if (dashLength > distRemaining)
                dashLength = distRemaining;
            var xStep = Math
                    .sqrt(dashLength * dashLength / (1 + slope * slope));
            x += xStep;
            y += slope * xStep;
            this[draw ? &#39;lineTo&#39; : &#39;moveTo&#39;](x + temp, y + temp);
            distRemaining -= dashLength;
            draw = !draw;
        }
        // Ensure that the last segment is closed for proper stroking
        this.moveTo(0, 0);
    }

Copy after login

In fact, method 2 can not only draw dotted lines, but dotted lines are just one of them. function, the main difference lies in the setting of the last parameter. Different settings will result in different types of dashed lines drawn. As for why, if you are willing, you can study it yourself.
Students who need to learn html5 please pay attention to php Chinese website html5 video tutorial, many html5 online video tutorials can be watched for free!

The above is the detailed content of Use html5 to implement the dotted line effect code. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn