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' Q9 C" |+ D8 _
以下是我自己的实现,只支持画水平的和垂直的圆点虚线,可以参考phrogz与rod macdougall的方法来添加斜线描画的功能。# F5 f7 G0 [; a5 Q
代码如下:
6 n+ D7 I1 Z* @; e) C; Tvar 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 }
更多网页制作信息请查看: 网页制作 |
|