<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>arcTo示意</title>
</head>
<body>
<canvas id="ourCanvas" width="500" height="500" style="border:3px dashed #0094ff"></canvas>
<script>
/*该方法表示绘制多个路径
n表示个数
dx、dy控制n角星的位置
size控制n角星的大小
*/
function createStar(context,n,dx,dy,size) {
//开始创建路径
context.beginPath();
var dig = Math.PI / n * 4;
for (var i = 0; i < n; i++) {
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.lineTo(x * size + dx, y * size + dy);
}
context.closePath();
}
var canvas = document.getElementById("ourCanvas");
var ctx = canvas.getContext("2d");
createStar(ctx, 3, 60,60, 50);
ctx.fillStyle = "#ff0";
ctx.fill();
createStar(ctx, 5, 100, 150, 60);
ctx.fillStyle = "#f00";
ctx.fill();
createStar(ctx, 9, 100,280, 80);
ctx.fillStyle = "#ccc";
ctx.fill();
</script>
</body>
</html>