返回列表 发新帖

html5 canvas绘制圆点虚线实例

262.9k 13
swmozowtfl 发表于 2015-7-9 23:13:11|湖北 | 查看全部 阅读模式
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” —)。* S5 M3 {9 ?2 B- s8 g, F
在stack overflow上,phrogz提供了一个自己的画虚线的实现(),严格的说,这是一个点划线的实现(p.s. 我认为该页面上rod macdougall的简化版更好)。那么,如果需要画圆点虚线(如下图所示),应该怎么办呢?
; H) h$ A6 R8 T! V9 `, `8 C- c

2 J8 s2 Y! z' s5 t/ p* I                               
登录/注册后可看大图
' Q9 C" |+ D8 _
以下是我自己的实现,只支持画水平的和垂直的圆点虚线,可以参考phrogz与rod macdougall的方法来添加斜线描画的功能。# F5 f7 G0 [; a5 Q
代码如下:
6 n+ D7 I1 Z* @; e) C; T
var canvasprototype = window.canvasrenderingcontext2d && canvasrenderingcontext2d.prototype;
: B& Q3 b) c* G0 Zcanvasprototype.dottedline = function(x1, y1, x2, y2, interval) {
! b' s3 I8 e! A% g" x2 tif (!interval) {
. M* E. ^% ?1 F5 E8 Yinterval = 5;
$ p6 r" Y  @. u, ?8 Y3 Y$ }7 E}) I! F& p$ s% l) L/ J
var ishorizontal=true;3 \6 H7 F* g. }. m* ~$ i1 B
if (x1==x2){' A- M" x# @1 b& S/ K! U( J
ishorizontal=false;9 w& M* v3 V4 \' A9 B
}
7 T5 \' |- n* E" M  i; tvar len = ishorizontal ? x2-x1 : y2-y1;
' K* L* b2 W9 i0 R  k" L, zthis.moveto(x1, y1);; `% z" h8 m- u4 C2 X# J( ~3 g0 m
var progress=0;
3 Y( Q7 ~7 {0 O/ Ewhile (len > progress) {& B0 N3 T, X$ J5 v5 l, V" e
progress += interval;
+ K. y# o0 J' _5 Xif (progress > len) {
! l4 T0 K' Q! v2 X- O! Qprogress = len;
- N/ T2 B3 B+ m3 ~7 q. w+ R}1 B0 H7 q3 b' C6 q# }% A+ V% ?
if (ishorizontal) {
" Y+ i) {3 s* M0 Mthis.moveto(x1+progress,y1);
/ m/ X+ l1 f6 uthis.arc(x1+progress,y1,1,0,2*math.pi,true);6 a: O6 [$ d; Q7 \
this.fill();
0 a5 P# q! l: b& ?+ D} else {
" A0 Z( i, [% ?3 Z! ~) ~' [this.moveto(x1,y1+progress);
2 K) c, Z7 a1 h+ X  Lthis.arc(x1,y1+progress,1,0,2*math.pi,true);
  [  }3 ~1 |4 Nthis.fill();
' B. S/ w# b, Y' [}1 M/ D; [' ~+ V& \/ T# r
}
' H/ Z2 L1 ?; b& J}
0 U0 }# E3 S5 q- j1 v5 `9 L* N+ e' P% ~4 }
更多网页制作信息请查看: 网页制作

回复|共 13 个

gevaemaidovef 发表于 2015-10-7 11:40:42|瑞典 | 查看全部
小手一抖,经验到手!手拿酱油,低头猛走!酱油党路过,杜绝零回复
tohme 发表于 2015-10-7 11:40:48|INNA | 查看全部
哈 你逗逗他啊
wwdu926a 发表于 2015-10-7 11:40:58|比利时 | 查看全部
在这个处女都要验证码的时代不得不弄个会员来当每天看贴无数基本上不回 后来发现很傻,很多比我注册晚的级别都比我高,我终于觉悟于是我就把这段文字保存在记事本里,每看一贴就复制粘贴一次。
gevaemaidovef 发表于 2015-10-7 11:41:19|日本 | 查看全部
极品可以说是让你馨香满腹,三日不绝!!古人说的好:想要作文章,先要学做人。由作者的文章我们也可以揣测出作者定是成长在一个汗牛充栋,文化氛围浓厚而且精神面貌积 极向上的幸福家庭里面。在现在这个物欲横流,亲情冷淡的时代,能够在这样的家庭里
tohme 发表于 2015-10-7 11:41:24|Reserved | 查看全部
刚才游戏去了 ~~嘿嘿~~
Mqokjdvq 发表于 2015-12-19 10:59:45|广东 | 查看全部
因删贴不及时所产生的任何法律(书法,基本法,劳动法,婚姻法,输入法,国际法,今日说法,与台湾关系法及文中涉及或可能涉及以及未及之法,各地治安管理条例)纠纷或责任本人概不负责。
tohme 发表于 2015-12-19 11:00:18|香港 | 查看全部
呵呵  我傻了‘~~哈哈
effoggikeftor 发表于 2015-12-19 11:00:25|俄罗斯 | 查看全部
哈哈 小心被她看见哦~~~~
mwxny 发表于 2015-12-19 11:00:35|埃及 | 查看全部
感谢党和人民的关爱~~~
effoggikeftor 发表于 2017-4-11 16:19:59|美国 | 查看全部
不早了 明天见 各位晚安~~~~
seazvyt 发表于 2017-4-11 16:21:45|美国 | 查看全部
老大,我好崇拜你哟
bqtklouu 发表于 2017-4-11 16:24:06|INNA | 查看全部
我也不知道了~~你把我问蒙了 呵呵
buingeEvineus 发表于 2017-4-11 16:24:24|Reserved | 查看全部
对自己好点~别难为自己

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

得知互动是一个融创意、设计、开发、营销、生活、互联网于一体的专业交流分享平台。
Copyright © 2026 得知互动-专注Ai与站长技术交流社区-Ai交流平台 版权所有 All Rights Reserved. Powered by Discuz! X5.0 鄂ICP备15006301号-5|鄂公网安备 42018502006730号
关灯 在本版发帖 扫一扫添加QQ客服 返回顶部
快速回复 返回顶部 返回列表