canvas作dashTo的函数封装

最新推荐文章于 2022-05-17 14:43:50 发布

FE焱黑C

最新推荐文章于 2022-05-17 14:43:50 发布

阅读量285

点赞数

分类专栏： web前端js代码文章标签： canvas

本文链接：https://blog.csdn.net/qq_36771997/article/details/75304119

版权

web前端js代码专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#oCanv{background:lavenderblush; }
</style>
</head>
<body>
<canvas id="oCanv" width="200" height="200"></canvas>

//采用canvas制作dashTo的封装函数，dashTo(obj,x1,y1,x2,y2)参数分别对应,obj:canvas的id;初始坐标:x1y1;终点坐标:x2y2;lineLength:实线的长度等于间隔的空隙长度,为了达到lineTo一样的效果只是实现虚线。

dashTo("oCanv",10,10,180,190,10);
function dashTo(obj,x1,y1,x2,y2,lineLengh){
var odash=document.getElementById(obj);
var cxt=odash.getContext('2d');
var c=Math.sqrt((y2-y1)*(y2-y1)+(x2-x1)*(x2-x1)) ;
var len=Math.floor(c/(2*lineLengh));
var disX=(x2-x1)/c*lineLengh;
var disY=(y2-y1)/c*lineLengh;
for(var i=0;i<len;i++){
cxt.save();
cxt.beginPath();
cxt.strokeStyle="#0000FF";
cxt.lineWidth=3;
var x3=x1+2*i*disX;
var y3=y1+2*i*disY;
cxt.moveTo(x3,y3);
var x4=x3+disX;
var y4=y3+disY;
cxt.lineTo(x4,y4);
cxt.stroke();
cxt.closePath();
cxt.restore();
};
var x5=x4+disX;
var y5=y4+disY;
if(Math.abs(x5-x2)<disX){
cxt.beginPath();
cxt.strokeStyle="#09F250";
cxt.lineWidth=3;
cxt.moveTo(x5,y5);
cxt.lineTo(x2,y2);
cxt.stroke();
cxt.closePath();
}else if(Math.abs(x5-x2)>disX){
cxt.beginPath();
cxt.strokeStyle="#09F250";
cxt.lineWidth=3;
cxt.moveTo(x5,y5);
cxt.lineTo(x5+disX,y5+disY);
cxt.stroke();
cxt.closePath();
}
};
</script>
</body>
</html>

FE焱黑C

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas作dashTo的函数封装

采用canvas制作dashTo的封装函数，dashTo(obj,x1,y1,x2,y2)参数分别对应,obj:canvas的id;初始坐标:x1y1;终点坐标:x2y2;lineLength:实线的长度等于间隔的空隙长度,为了达到lineTo一样的效果只是实现虚线。
复制链接

扫一扫