82canvas党徽和五角星

说明：左边是中国国民党的党徽，右边是中国共~产~党(提示说是违规内容)的五角星，都是用HTML5里面的canvas写的。


```html:run
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>党徽和五角星</title>
</head>
<body>
<canvas id="canvas" width="450" height="450">
    您的浏览器不支持canvas标签，无法看到党徽
</canvas>
<canvas id="canvas1" width="450" height="450">
    您的浏览器不支持canvas标签，无法看到五角星
</canvas>
<script>
    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>
```
82canvas党徽和五角星

猜你喜欢
