用html5实现画虚线效果代码-H5教程-PHP中文网

用html5实现画虚线效果代码

零下一度

发布： 2017-04-22 14:14:08

原创

6403人浏览过

html5已经出来好长一段时间了，只是最近才开始接触到它，html5提供了很多内置的函数可以实现很多功能，比如画线段、画矩形、画圆、画弧等。但是html5没有提供画虚线的功能，如果想实现在canvas上画曲线就要发费一点功夫了。

下面提供两种方式实现画虚线的功能：

方法一就是就是单独写一个函数，当想画曲线的时候就调用这个曲线就行了。

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>();

登录后复制

}

当需要画虚线的时候直接调用这个方法就行了。但是有的人可能会需要将这个函数直接植入到html5，以方便任何时候调用，这也是可行的，但是只是针对你自己使用。

方法二，上面已经提示到了，可以将这个方法直接植入到html5，当做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);
	}

登录后复制

实际上方法二不仅可以画虚线，虚线只是其中之一的功能，主要的区别在于最后一个参数的设置，设置的不同，所绘制的虚线类型也不相同。至于为什么，大家如果愿意的话，可以自己去研究一下。
需要学习html5的同学请关注php中文网html5视频教程，众多html5在线视频教程可以免费观看！

以上就是用html5实现画虚线效果代码的详细内容，更多请关注php中文网其它相关文章！