roundRect(ctx, x, y, w, h, r) {
var that = this;
ctx.save();
if (w < 2 * r) {
r = w / 2;
}
if (h < 2 * r) {
r = h / 2;
}
ctx.beginPath();
ctx.setStrokeStyle('#f55');
ctx.setLineWidth(1);
ctx.moveTo(x + r, y);
ctx.arcTo(x + w, y, x + w, y + h, r);
ctx.arcTo(x + w, y + h, x, y + h, r);
ctx.arcTo(x, y + h, x, y, r);
ctx.arcTo(x, y, x + w, y, r);
ctx.stroke();
ctx.closePath();
ctx.draw(true);
},
this.roundRect(ctx,100,10,30,60,10);
this.roundRect(ctx,150,10,30,60,15);
this.roundRect(ctx,200,10,60,30,10);
this.roundRect(ctx,270,10,60,30,15);
roundRect2(ctx,x,y,w,h,r,stroke,color){
ctx.save();
ctx.beginPath();
if(stroke){
ctx.setStrokeStyle(color);
}else{
ctx.setFillStyle(color);
}
x += 0.5;
y += 0.5;
ctx.arc(x+r,y+r,r,Math.PI,Math.PI*1.5);
ctx.moveTo(x+r,y);
ctx.lineTo(x+w-r,y);
ctx.arc(x+w-r,y+r,r,Math.PI*1.5,Math.PI*2);
ctx.lineTo(x+w,y+h-r);
ctx.arc(x+w-r,y+h-r,r,0,Math.PI*0.5);
ctx.lineTo(x+r,y+h);
ctx.arc(x+r,y+h-r,r,Math.PI*0.5,Math.PI);
ctx.lineTo(x,y+r);
if(stroke){
ctx.stroke();
}else{
ctx.fill();
}
ctx.closePath();
ctx.draw(true);
}
本文为luffy730原创文章,转载无需和我联系,但请注明来自luffy730博客http://blog.gyqin.com