利用三角函数在canvas上画虚线的方法

互联网   01-11 16:54:06   作者:Gipsy_Danger   我要评论

这篇文章主要介绍了利用三角函数在canvas上画虚线的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

因为canvas的api没有虚线的

所以需要自己实现

顺便复习一下三角函数岂不美滋滋

 

var context=document.getElementById("canvas").getContext("2d");
function drawDashedLine(context,x1,y1,x2,y2,dashlength){
    dashlength=dashlength===undefined?5:dashlength;
    var deltaX=x2-x1; //一条直角边的长
    var deltay=y2-y1; //另一条指教边的长

    var numDashes=Math.floor(
        Math.sqrt(deltaX*deltaX+deltay*deltay)/dashlength  //Math.sqrt返回一个数的平方根  dashlength虚线每个点的长度
    )

    var everydashLength_x=deltaX/numDashes  //确定X轴每条虚线点的起始点
    var everydashLength_y=deltay/numDashes  //确定Y轴每条虚线点的起始点

    for(var i=0;i<numDashes;i++){
        context[i%2===0?'moveTo':"lineTo"]
        (x1+everydashLength_x*i,y1+everydashLength_y*i)
    }
    context.stroke()

}
context.lineWidth=3
context.strokeStyle="blue"
drawDashedLine(context,20,20,context.canvas.width-20,20,20)

效果如图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • HTML5拖拽API经典实例详解

    拖拽API是HTML5的新特性,相对于其他新特性来说,重要程度占到6成。这篇文章通过经典案例给大家介绍了HTML5拖拽API的知识要点,需要的朋友参考下吧
    2018-04-20
  • HTML5中的Web Notification桌面右下角通知功能的实现

    这篇文章主要介绍了HTML5中的Web Notification桌面右下角通知功能的实现代码,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2018-04-19
  • HTML5实现移动端复制功能

    这篇文章主要介绍了HTML5实现移动端复制功能,文中还给大家介绍了使用clipboard.js实现移动端粘贴复制功能的实现代码,需要的朋友参考下吧
    2018-04-19
  • canvas实现漂亮的下雨效果的示例

    这篇文章主要介绍了canvas实现漂亮的下雨效果的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-18
  • 详解Html5 监听拦截Android返回键方法

    这篇文章主要介绍了详解Html5 监听拦截Android返回键方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-18
  • 如何使用localstorage代替cookie实现跨域共享数据问题

    这篇文章主要介绍了如何使用localstorage代替cookie实现跨域共享数据问题,本文给大家带来了实现方案,使用postmessage和localstorage进行数据跨域共享问题,感兴趣的朋友
    2018-04-18
  • HTML5实现自带进度条和滑块滑杆效果

    本文给大家介绍了HTML5实现自带进度条和滑块滑杆效果,运用progress标签,设置好min和max数值就好,可以用value获取其中的进度值。具体实现代码大家参考下本文
    2018-04-17
  • 使用HTML5 Geolocation实现一个距离追踪器

    HTML5 Geolocation(地理定位)用于定位用户的位置,那么怎么实现一个距离追踪器呢?下面小编给大家带来了基于HTML5 Geolocation实现一个距离追踪器的实例代码,感兴趣的朋
    2018-04-09
  • 简单聊聊H5的pushState与replaceState的用法

    这篇文章主要介绍了简单聊聊H5的pushState与replaceState的用法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-03
  • 利用html5 canvas动态画饼状图的示例代码

    这篇文章主要介绍了利用html5 canvas动态画饼状图的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-02

最新评论