2.9.3_arcTo()画圆角矩形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>arcTo()画圆角矩形</title>
<style>
body{
background: #000;
}
#canvas{
background: #fff;
}
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="600"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
drawGrid('lightgray',10,10);
drawRoundedRect('blue','yellow',50,40,100,100,10);
drawRoundedRect('purple','green',275,40,-100,100,20);
drawRoundedRect('red','white',300,140,100,-100,30);
drawRoundedRect('white','blue',525,140,-100,-100,40);
function drawRoundedRect(strokeStyle,fillStyle,cornerX,cornerY,width,height,cornerRadius){
context.beginPath();
roundedRect(cornerX,cornerY,width,height,cornerRadius);
context.strokeStyle = strokeStyle;
context.fillStyle = fillStyle;
context.lineWidth = 10;
context.stroke();
context.fill();
}
function roundedRect(cornerX,cornerY,width,height,cornerRadius){
if(width>0){
context.moveTo(cornerX+cornerRadius,cornerY);
}else{
context.moveTo(cornerX-cornerRadius,cornerY);
}
context.arcTo(cornerX+width,cornerY,cornerX+width,cornerY+height,cornerRadius);
context.arcTo(cornerX+width,cornerY+height,cornerX,cornerY+height,cornerRadius);
context.arcTo(cornerX,cornerY+height,cornerX,cornerY,cornerRadius);
if(width>0){
context.arcTo(cornerX,cornerY,cornerX+cornerRadius,cornerY,cornerRadius)
}else{
context.arcTo(cornerX,cornerY,cornerX-cornerRadius,cornerY,cornerRadius);
}
}
function drawGrid(color,stepX,stepY){
context.save();
context.strokeStyle = color;
context.lineWidth = 0.5;
for(var i=stepX+0.5;i<context.canvas.width;i+=stepX){
context.beginPath();
context.moveTo(i,0);
context.lineTo(i,context.canvas.height);
context.stroke();
}
for(var i=stepY+0.5;i<context.canvas.height;i+=stepY){
context.beginPath();
context.moveTo(0,i);
context.lineTo(context.canvas.width,i);
context.stroke();
}
context.restore();
}
</script>
</html>