你好,我看了你写的这个是基于html5做的,我想问一下有没有基于纯javascript写的算法。
原文地址:用javascript在canvs上绘制圆角矩形
作者:蓝月
转自:
http://jo2.org/html5-canvas-round-rect/
//圆角矩形
CanvasRenderingContext2D
.prototype.roundRect = function (x, y, w, h, r) {
//if (w < 2 * r) r = w / 2;
//if (h < 2 * r) r = h / 2;
this.beginPath();
this.moveTo(x+r, y);
this.arcTo(x+w, y, x+w, y+h, r);
this.arcTo(x+w, y+h, x, y+h, r);
this.arcTo(x, y+h, x, y, r);
this.arcTo(x, y, x+w, y, r);
// this.arcTo(x+r, y);
this.closePath();
return this;
}
源码:
使用:
var c=document.getElementByIdx_x('myCanvas');
var ctx=c.getContext('2d');
ctx.
roundRect
(
200
,
300
,
200
,
120
,
20
)
.
stroke
(
)
;
这种方法可以扩展
ContextRenderingContext2 D原型
那么什么是ContextRenderingContext2 D呢? W3C网站上有详细的说明:
http://www.w3.org/html/ig/zh/wiki/2dcontext#canvasrenderingcontext2d
扩展
ContextRenderingContext2 D原型的好处是,可以将扩展函数写在独立的.js文件中,然后在html中加入该脚本文件就可以了,如: