php生成圆角矩形,小程序canvas 画圆角矩形

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