用html5实现画虚线效果代码


本文摘自PHP中文网,作者零下一度,侵删。

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

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的一个函数

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

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

    }

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

以上就是用html5实现画虚线效果代码的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

HTML5-web storage apis的简述

详解HTML5移动端音频与视频问题及解决方案

HTML5表单新增元素与属性

HTML5 touch事件实现触屏页面上下滑动(一)

h5设置或返回音频/视频播放的当前位置(以秒计)的属性currenttime

关于html中<label>标签的for属性的详细分析

HTML5实现移动端下拉刷新(原理和代码)

详解h5和html4的区别

妙味课堂HTML5视频资料分享

详细介绍精选HTML5/css3动画应用源码分享

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...