HTML5：canvas党徽和五角星-前端ABC

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党徽和五角星

HTML5：canvas党徽和五角星

相关推荐

发表评论 0