如何利用HTML5的canvas绘制党徽和五角星

<!doctype html>

<html>

<head>

<title>党徽和五角星</title>

</head>

<body>

您的浏览器不支持canvas标签，无法看到党徽

</canvas>

您的浏览器不支持canvas标签，无法看到五角星

</canvas>

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

context.beginPath();

context.arc(215, 215, 200, 0, 360);

context.fillStyle = "#030d48";

context.strokeStyle = "grey";

context.lineWidth = "10";

context.stroke();

context.fill();

context.closePath();

context.beginPath();

for (var i = 0; i < 12; i++) {

context.lineTo(Math.cos((i * 30) / 180 * Math.PI) * 200 + 215,

Math.sin((i * 30) / 180 * Math.PI) * 200 + 215);

context.lineTo(Math.cos((i * 30 + 15) / 180 * Math.PI) * 105 + 215,

Math.sin((i * 30 + 15) / 180 * Math.PI) * 105 + 215);

}

context.fillStyle = "#ffffff";

context.fill();

context.closePath();

context.beginPath();

context.arc(215, 215, 105, 0, 360);

context.strokeStyle = "#030d48";

context.lineWidth = "10";

context.stroke();

context.closePath();

/*以上党徽，以下五角星*/

var canvas1 = document.getElementById("canvas1");

var context1 = canvas1.getContext("2d");

context1.beginPath();

context1.rotate(18*Math.PI/180);

for (i = 0; i < 5; i++) {

context1.lineTo(Math.cos((i * 72+36) / 180 * Math.PI) * 200 + 250,

Math.sin((i * 72+36) / 180 * Math.PI) * 200 + 150);

context1.lineTo(Math.cos((i * 72+72) / 180 * Math.PI) * 75 + 250,

Math.sin((i * 72+72) / 180 * Math.PI) * 75 + 150);

}

context1.fillStyle = "#ff0000";

context1.fill();

context1.closePath();

</script>

</body>

</html>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h20000.shtml