html 画圆点代码,HTML5 Canvas绘制圆点虚线实例
HTML5 Canvas 提供了很多图形绘制的函数,但是很可惜,Canvas API只提供了画实线的函数(lineTo),却并未提供画虚线的方法。这样的设计有时会带来很大的不便,《JavaScript权威指南》的作者David Flanagan就认为这样的决定是有问题的,尤其是在标准的修改和实现都比较简单的情况下 (“…something that is so trivial to add to the specification and so trivial to implement… I really think you’re making a mistake here” — http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-May/011224.html)。
在Stack Overflow上,Phrogz提供了一个自己的画虚线的实现(http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas),严格的说,这是一个点划线的实现(p.s. 我认为该页面上Rod MacDougall的简化版更好)。那么,如果需要画圆点虚线(如下图所示),应该怎么办呢?
以下是我自己的实现,只支持画水平的和垂直的圆点虚线,可以参考Phrogz与Rod MacDougall的方法来添加斜线描画的功能。
复制代码
代码如下:
var canvasPrototype = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;
canvasPrototype.dottedLine = function(x1, y1, x2, y2, interval) {
if (!interval) {
interval = 5;
}
var isHorizontal=true;
if (x1==x2){
isHorizontal=false;
}
var len = isHorizontal ? x2-x1 : y2-y1;
this.moveTo(x1, y1);
var progress=0;
while (len > progress) {
progress += interval;
if (progress > len) {
progress = len;
}
if (isHorizontal) {
this.moveTo(x1+progress,y1);
this.arc(x1+progress,y1,1,0,2*Math.PI,true);
this.fill();
} else {
this.moveTo(x1,y1+progress);
this.arc(x1,y1+progress,1,0,2*Math.PI,true);
this.fill();
}
}
}
html 画圆点代码,HTML5 Canvas绘制圆点虚线实例相关推荐
- html5 canvas绘制圆形进度实例
2019独角兽企业重金招聘Python工程师标准>>> html5 canvas绘制圆形进度实例 <canvas id="test" width=200 h ...
- html 画动画效果,html5 canvas绘制曲线动画特效
特效描述:html5 canvas绘制 曲线动画特效. 代码结构 1. HTML代码 Balls Size Speed Delay Go! Presets: Atomic Flower Spiro Y ...
- HTML画正方形钟表,html5 canvas绘制时钟表时间
特效描述:html5 canvas绘制 时钟表时间.用canvas精灵绘制器绘制的时钟 代码结构 1. 引入JS 2. HTML代码 var Sprite=function(name,painter, ...
- 谷歌图标html5代码,HTML5 canvas绘制chrome浏览器 logo图标_网页代码站(www.webdm.cn)
HTML5 canvas绘制chrome图标 使用canvas绘制chrome logo $ele:null, ele:null, context:null } $(function(){ oCanv ...
- php 画虚线,HTML5 Canvas绘制圆点虚线实例_html5教程技巧
HTML5 Canvas 提供了很多图形绘制的函数,但是很可惜,Canvas API只提供了画实线的函数(lineTo),却并未提供画虚线的方法.这样的设计有时会带来很大的不便,<JavaScr ...
- html5虚线绘制的函数,HTML5 Canvas绘制圆点虚线实例
html5 canvas 提供了很多图形绘制的函数,但是很可惜,canvas api只提供了画实线的函数(lineto),却并未提供画虚线的方法.这样的设计有时会带来很大的不便,<javascr ...
- html线条 实线中带一圆点,HTML5 Canvas: 绘制圆点虚线
HTML5 Canvas 提供了很多图形绘制的函数,但是很可惜,Canvas API只提供了画实线的函数(lineTo),却并未提供画虚线的方法.这样的设计有时会带来很大的不便,<JavaScr ...
- 彩色圆圈的html代码,HTML5 Canvas彩色圆点粒子飘动动画特效
js代码 var c = new Cbg({ container: ".canvas", //随机生成动画,默认无控制 control: "auto", //鼠 ...
- html玫瑰花效果代码,HTML5 canvas绘制的玫瑰花效果
有人用html就写了一朵漂亮的玫瑰,是不是有点太骚气了.纯javascipt就弄出了玫瑰花,再次显示了HTML5的威力 警告:传说IE6内核是无法看到的,建议用Chrome或者Firefox. 玫瑰花 ...
最新文章
- 解决流程自动化“最后一公里问题”,达观数据发布智能 RPA
- 职场:5种幼稚表现,好多工作十年的人还在犯
- ICML2020 | 基于贝叶斯元学习在关系图上进行小样本关系抽取
- pandas读取csv文件的前几行数据(nrows参数)、pandas读取csv文件的中间几行数据(skiprows=range(a,b))
- 2021-09-26
- android 锁屏解决方案,Android 实现锁屏的较完美方案
- 【今日CV 计算机视觉论文速览 第137期】Fri, 28 Jun 2019
- C语言------指针
- 11-2-进程控制块
- 拓端tecdat|Python用Keras神经网络序列模型回归拟合预测、准确度检查和结果可视化
- seo入门必备[转载]
- DwgLocker 图纸加密外发控制系统
- 随身WIFI刷机记录 UF1003
- VUE 嵌入 WPS插件
- Memcached Redis构建缓存服务器
- c语言定义用户标识符32个,c语言用户标识符是什么
- ChatGPT4吊打国内一众所谓山寨科技公司
- ccna过后,路在何方?!
- Maya更改路径后找引用失败解决方法
- 建筑施工扣件式钢管模板支架技术规程