在canvas API中,我们发现只提供了画实线的方法实现,并没有虚线的相关方法,那么如何实现画虚线呢?
现实中,虚线是由一小段小段的实线线段组成,那么只要我们通过画出等长度的线段就可以组成我们想要的虚线.
下面我们就可以根据上面的原理来实现虚线的画法.如下:
var context = document.getElementById('canvas').getContext('2d'); //求斜边长度 function getBeveling(x,y) { return Math.sqrt(Math.pow(x,2)+Math.pow(y,2)); } function drawDashLine(context,x1,y1,x2,y2,dashLen) { dashLen = dashLen === undefined ? 5 : dashLen; //得到斜边的总长度 var beveling = getBeveling(x2-x1,y2-y1); //计算有多少个线段 var num = Math.floor(beveling/dashLen); for(var i = 0 ; i < num; i++) { context[i%2 == 0 ? 'moveto' : 'lineto'](x1+(x2-x1)/num*i,y1+(y2-y1)/num*i); } context.stroke(); } drawDashLine(context,50,300,180,5);展示效果如下:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。