html页面画虚线,HTML5中canvas怎么画虚线

HTML5中canvas如何画虚线

虚线也可以看成是一段段的实线组成的,而实线是利用context.moveTo(x,y);context.lineTo(x2,y2);context.stroke();

那么我们就可以利用context的基本方法来完成虚线的实现原理,如下:

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,50,300,180,5);展示效果如下:

1楼you23hai45昨天 23:09厉害啊，继续加油阿！

html页面画虚线,HTML5中canvas怎么画虚线相关推荐

html中间一条虚线怎么画,【html5】HTML5中canvas怎样画虚线
在canvas API中,我们发现仅仅提供了画实线的方法实现,并没有虚线的相关方法,那么怎样实现画虚线呢? 现实中,虚线是由一小段小段的实线线段组成,那么仅仅要我们通过画出等长度的线段就能够组成我们想 ...
php版canvas,PHP实现将HTML5中Canvas图像保存到服务器
这篇文章主要介绍了PHP实现将HTML5中Canvas图像保存到服务器的方法,可实现将Canvas图像保存到服务器的功能,是非常实用的技巧,需要的朋友可以参考下本文实例讲述了PHP实现将HTML5中 ...
html5中提供的绘图元素,HTML5中Canvas元素的使用总结
HTML5中Canvas元素的使用总结 Canvas提供了开发者自定义绘图的接口,我们可以公国getContext()函数来获取绘图上下文进行绘制操作,这个函数中可以传入两个参数,其中第1个参数设置绘 ...
html5中Canvas、绘制线条模糊、常见绘制工具、绘制基本图形、绘制图片、面向对象的方式绘制图形图片、绘制文本、帧动画绘制
Canvas容器: canvas标签用来定义图像的容器,必须配合脚本来绘制图像,canvas也运用于游戏开发.注意:canvas绘制图时会出现线条模糊情况,这是因为显示屏像素和canvas中定义的一个 ...
浅谈HTML5中canvas中的beginPath()和closePath()的重要性
beginPath的作用很简单,就是开始一段新的路径,但在使用canvas绘图的过程中却非常重要先来看一小段代码: var ctx=document.getElementById("can ...
Html5中Canvas（画布）的使用
什么是 Canvas?HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像.画布是一个矩形区域,您可以控制其每一像素.canvas 拥有多种绘制路径.矩形.圆形.字符以及添加 ...
html5中canvas画布实现手机端和移动端的刮刮乐效果
用html5中的canvas实现刮刮乐的效果使用html+css实现背景的样式使用clearRect()方法实现挂去的作用手机端使用addEventListener()监听手机端滑动事件tou ...
python画窗口_pyqt中图案如何画在子窗口上
该楼层疑似违规已被系统折叠隐藏此楼查看此楼基本思路是从QWidget派生出一个类重写paintEvent,在里面画图. UI部分代码是这样的 class Ui_Form(object): def ...
毛边效果 html,Html5中Canvas画线有毛边如何解决
Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按 ...

html页面画虚线,HTML5中canvas怎么画虚线

html页面画虚线,HTML5中canvas怎么画虚线相关推荐

最新文章

热门文章