概述
<!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas</title> <style type="text/css"> #canvas{border:1px solid #eee ; display:block; background-color: #B36666; margin: 20px auto; } </style></head><body><div><canvas id = "canvas" width = "800px" height = "800px"></canvas></div> <script type = "text/javascript" >
window.οnlοad=function(){
var context = document.getElementById('canvas').getContext('2d')
fillRoundRect(context,150,150,500,500,10,'#bbaba0');
for(i=0;i<4;i++)
for(j=0;j<4;j++)
fillRoundRect(context,170+i*120,170+j*120,100,100,6,'#ccc0b3');
function fillRoundRect(context,x,y,width,height,radius,fillColor){
if (2*radius>width || 2*radius>height )
return;
context.save();
//设置开始绘制图形的开始坐标也就是左上角的坐标
context.translate(x,y);
pathRoundRect(context,width,height,radius);
context.fillStyle= fillColor || 'black';
context.fill();
context.restore();
}
function strokeRoundRect(context,x,y,width,height,radius,lineWith,color){
context.save();
//设置开始绘制图形的开始坐标也就是左上角的坐标
context.translate(x,y);
pathRoundRect(context,width,height,radius);
context.lineWith = lineWith || 1;
context.strokeStyle = color || 'black';
context.stroke();
context.restore();
}
function pathRoundRect(context,width,height,radius){
context.beginPath();
context.arc(width-radius,height-radius,radius,0,Math.PI/2);
context.lineTo(radius,height);
context.arc(radius,height-radius,radius,Math.PI/2,Math.PI);
context.lineTo(0,radius);
context.arc(radius,radius,radius,Math.PI,Math.PI*3/2);
context.lineTo(width-radius,0);
context.arc(width-radius,radius,radius,Math.PI*3/2,Math.PI*2);
context.closePath();
}
}
</script> </body> </html>
最后
以上就是调皮小霸王为你收集整理的canvas 绘制圆角矩形的全部内容，希望文章能够帮你解决canvas 绘制圆角矩形所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复