Use html5 to implement the dotted line effect code

零下一度
Release: 2017-04-22 14:14:08
Original
6500 people have browsed it

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) { 
 dashLength=dashLength === undefined?5:dashLength;  var deltaX = x2-x;  var deltaY = y2-y;  var numDashs = Math.floor(Math.sqrt(deltaX*deltaX+deltaY*deltaY)/dashLength);    for(var i =0 ;i<numDashs;i++)  {  context[i%2===0?'moveTo':'lineTo'](x+(deltaX/numDashs)*i,y+(deltaY/numDashs)*i);  }  context.stroke();
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 ? 'lineTo' : 'moveTo'](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 websitehtml5 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!

Related labels:
source:php.cn
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
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!