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” —)。
! }. j+ b5 ^& I! O4 I4 h在stack overflow上,phrogz提供了一个自己的画虚线的实现(),严格的说,这是一个点划线的实现(p.s. 我认为该页面上rod macdougall的简化版更好)。那么,如果需要画圆点虚线(如下图所示),应该怎么办呢?2 v1 ], l3 E9 L1 R1 z8 v& c
/ C# Y% n9 i @) {: a以下是我自己的实现,只支持画水平的和垂直的圆点虚线,可以参考phrogz与rod macdougall的方法来添加斜线描画的功能。
5 h5 H3 H" P/ L' M4 r" }代码如下:
7 Z/ E* K, ~2 [, D0 E; dvar canvasprototype = window.canvasrenderingcontext2d && canvasrenderingcontext2d.prototype;
% ]' L( M% K ]& q) v0 Tcanvasprototype.dottedline = function(x1, y1, x2, y2, interval) {
/ a- C3 D2 k' X/ @5 N# Q" Sif (!interval) {- s: y( P o# r) A4 x' [+ r b
interval = 5;, D$ H3 c& u( B# u) L: @4 o
}" I7 ^* d& b1 _4 p; U: y* f
var ishorizontal=true;2 A: X7 X% U: B8 M0 H& o3 O% g
if (x1==x2){
; S* h+ x8 \7 ?8 R: j$ `' wishorizontal=false;
$ U9 E0 X5 Q! x' G; Q! w}) K+ K! o1 b4 w& m) P* a
var len = ishorizontal ? x2-x1 : y2-y1;* p& E* O) \' \1 N
this.moveto(x1, y1);- j! U4 o: V* E, k
var progress=0;
; i) w4 `" Q, Fwhile (len > progress) {8 M$ }, l4 y! [ O* U: G' C/ f
progress += interval;
5 W" J" p% T8 m0 I( X7 {) e9 gif (progress > len) {1 \5 H* P6 C: P% F# l9 M& X
progress = len;
8 N X8 f, ?: q; @}; @" u. U, p/ |7 F
if (ishorizontal) {
: x v( I( H4 ^3 ^/ `0 qthis.moveto(x1+progress,y1);3 t9 g( E+ j+ x9 Y
this.arc(x1+progress,y1,1,0,2*math.pi,true);# U) J9 k: m$ b9 |
this.fill();
1 ~! `$ e* m" c5 [5 b} else {
: x+ F, W3 A7 B/ ?2 X S+ r9 k: \, Ithis.moveto(x1,y1+progress);
+ n9 s, X g. \- athis.arc(x1,y1+progress,1,0,2*math.pi,true);
4 b$ S3 E2 N4 v4 O( k/ t/ `, wthis.fill();
* a! @' A% ^# c/ _" I* N* ~}* g* y: k& n k. m- x7 r
}- n& [5 Z- K" m" H' q8 x3 P* M; v
}
3 C! O% h1 i: d3 a0 c; R8 d! }$ T3 m8 S$ p! f: ?+ I! H7 L
更多网页制作信息请查看: 网页制作 |
|