利用三角函数在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 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
css3隔行变换色实现示例
Feb 19 HTML / CSS
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
Mar 01 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
浅谈Html5多线程开发之WebWorkers
May 02 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 HTML / CSS
Html5获取用户当前位置的几种方式
Jan 18 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
PhpMyAdmin中无法导入sql文件的解决办法
2010/01/08 PHP
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
My Desktop :) 桌面式代码
2008/12/29 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
一个简单的python程序实例(通讯录)
2013/11/29 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
什么是规则表达式
2012/05/03 面试题
岗位明星事迹材料
2014/05/18 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
个人德育工作总结
2015/03/05 职场文书