1、党徽(国民党)
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>党徽</title> </head> <body> <canvas id="canvas" width="600" height="600"> 您的浏览器不支持canvas标签,无法看到党徽 </canvas> <script> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.beginPath(); context.arc(300, 300, 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 + 300, Math.sin((i * 30) / 180 * Math.PI) * 200 + 300); context.lineTo(Math.cos((i * 30 + 15) / 180 * Math.PI) * 105 + 300, Math.sin((i * 30 + 15) / 180 * Math.PI) * 105 + 300); } context.fillStyle = "#ffffff"; context.fill(); context.closePath(); context.beginPath(); context.arc(300, 300, 105, 0, 360); context.strokeStyle = "#030d48"; context.lineWidth = "10"; context.stroke(); context.closePath(); </script> </body> </html>
2、五角星
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>五角星</title> </head> <body> <canvas id="canvas" width="600" height="600"> 您的浏览器不支持canvas标签,无法看到五角星 </canvas> <script> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.beginPath(); context.rotate(18*Math.PI/180); for (var i = 0; i < 5; i++) { context.lineTo(Math.cos((i * 72+36) / 180 * Math.PI) * 200 + 300, Math.sin((i * 72+36) / 180 * Math.PI) * 200 + 150); context.lineTo(Math.cos((i * 72+72) / 180 * Math.PI) * 75 + 300, Math.sin((i * 72+72) / 180 * Math.PI) * 75 + 150); } context.fillStyle = "#ff0000"; context.fill(); context.closePath(); </script> </body> </html>
欢迎分享本文,转载请保留出处:前端ABC » HTML5:canvas党徽和五角星