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


Posted in HTML / CSS onJanuary 11, 2018

因为canvas的api没有虚线的

所以需要自己实现

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

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

 

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)

效果如图

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

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

HTML / CSS 相关文章推荐
利用CSS3实现炫酷的飞机起飞动画
Sep 17 HTML / CSS
纯CSS3实现表单验证效果(非常不错)
Jan 18 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 HTML / CSS
HTML5制作表格样式
Nov 15 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
HTML5公共页面提取作为公用代码的方法
Jun 30 HTML / CSS
前端水印的简单实现代码示例
Dec 02 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 #HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 #HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 #HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 #HTML / CSS
H5混合开发app如何升级的方法
Jan 10 #HTML / CSS
浅谈关于html5中图片抛物线运动的一些心得
Jan 09 #HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
Jan 08 #HTML / CSS
You might like
php强制更新图片缓存的方法
2015/02/11 PHP
PHP中16个高危函数整理
2019/09/19 PHP
JavaScript 组件之旅(一)分析和设计
2009/10/28 Javascript
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
2014/06/23 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
微信小程序实现图片上传
2019/05/23 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
[47:45]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第一场 2月26日
2021/03/11 DOTA
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
Python Gitlab Api 使用方法
2019/08/28 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
pyhton中__pycache__文件夹的产生与作用详解
2019/11/24 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
python能否java成为主流语言吗
2020/06/22 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
新郎新娘婚礼答谢词
2014/01/11 职场文书
大学生自我鉴定评语
2014/01/27 职场文书
大学活动总结模板
2014/07/10 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
老干部工作汇报材料
2014/10/28 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
了解Redis常见应用场景
2021/06/23 Redis
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python