html5 实现画虚线
来源:互联网 发布:台湾ptt大陆网络用语 编辑:程序博客网 时间:2024/04/28 11:10
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>'moveTo'</strong></span>:<span style="color:#008000;"><strong>'lineTo'</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 Safariif (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 strokingthis.moveTo(0, 0);}
实际上方法二不仅可以画虚线,虚线只是其中之一的功能,主要的区别在于最后一个参数的设置,设置的不同,所绘制的虚线类型也不相同。至于为什么,大家如果愿意的话,可以自己去研究一下。
0 0
- html5 实现画虚线
- 【html5】HTML5中canvas如何画虚线
- 用HTML5的canvas标签画虚线
- 【实例】html5-canvas中实现绘制虚线的方法
- IOS 如何实现画虚线
- 根据UIview 实现画虚线
- Flash中用AS实现画虚线
- Android实现画虚线的控件
- android 实现画虚线的二维坐标
- js实现任意两点之间画虚线
- 画虚线
- 画虚线
- 画虚线
- 画虚线
- 画虚线
- 画虚线
- 画虚线
- 画虚线
- Reverse Linked List
- 第一篇博客
- 第14周 【项目1 - 小玩文件】(4)
- 从DirectX SDK升级到Windows SDK
- mysql安装for linux(二进制)
- html5 实现画虚线
- IOS代码实现常用控件UIButton、UISlider、UISwitch、UISegmentedControl
- C++ Socket服务器简单代码示例
- linux php之脚本加速模块zend opcache
- 求1+2+3+...+n
- Android多线程编程详解,关于Handler ,Looper , Message , MessageQueue
- Groovy&Java multi Map 的引用
- oracle分页查询语句
- mysql安装for linux(rpm包)