如何利用HTML5的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

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

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();

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！