HTML5 canvas 中的arcTo()方法的用法
除了arc()之外，Canvas的绘图环境对象还提供了另一个用于创建圆弧路径的方法，那就是arcTo()。改方法接受了5个参数：
arcTo(x1,x2,y1,y2,radius)
arcTo()方法的参数分别代表两个点击圆形半径。该方法一指定的半径来绘制一条圆弧，此圆弧与当前点到第一个点（x1,y1）的连线相切，而且第一个点到第二点（x2,y2）的连线也相切。该方法的这些特性，使得它非常适合用了绘制矩形的原角。
使用arcTo()方法：
html:
<!Doctyp html>
<html>
<head>
<title>Rounded Rectangles</title>
<style>
#canvas{
background:lightskyblue;
-webkit-box-shadow:4px 4px 8px rgba(0,0,0,0.5);
-moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
box-shadow:4px 4px 8px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<canvas id=‘canvas‘ width=‘575‘ height=‘200‘>
canvas not supported
</canvas>
<script src=‘example.js‘></script>
</body>
</html>
example.js
var context = document.getElementById(‘canvas‘).getContext(‘2d‘);
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 drawRoundedRect(strokeStyle, fillStyle, cornerX, cornerY, width, height, cornerRadius) {
context.beginPath();
roundedRect(cornerX, cornerY, width, height, cornerRadius);
context.strokeStyle = strokeStyle;
context.fillStyle = fillStyle;
context.stroke();
context.fill();
}
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);