HTML5案例之蚊香、棒棒糖、爱心、五角星

一、蚊香

<body>
    <canvas id="mycanvas" width="400px" height="400px">
        <!-- 遇到不支持的浏览器  用于提示用户 -->
        <h2>您的浏览器不支持canvas,请换成谷歌浏览器</h2>
    </canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var g = canvas.getContext("2d");
        var radius = 10;//半径
        var angle = 30;//角度
        g.lineWidth = 10;//线宽
        g.beginPath();
        g.moveTo(200,200);
        console.log(canvas.width/2,canvas.height/2);
        for(var i = 0;i<200;i++){
            radius += 0.75;
            angle += (Math.PI*2)/50;
            var x = canvas.width/2 + radius*Math.cos(angle);
            var y = canvas.height/2 +radius*Math.sin(angle);
            g.lineTo(x,y);
        }
        g.stroke();
    </script>
</body>

二、棒棒糖

<body>
    <canvas width="300" height="600" id="canvas"></canvas>
    <script>
        let canvas = document.getElementById('canvas');
        let context = canvas.getContext('2d');
        context.beginPath();
        context.strokeStyle = 'lightgray';
        context.strokeRect(96,100,8,400);
        for (let i = 100; i > 0  ; i = i-12) {
            context.beginPath();
            context.arc(100,100,i,0,360);
            //rgba直接生成的棒棒糖颜色会很丑，你可以将这段代码注释看效果
            // let color = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;

            //通过hsl颜色表示法，生成"艳"一点的颜色
            let color = `hsl(${Math.random()*360},80%,60%)`;
            context.strokeStyle = color;
            context.fillStyle = color;
            context.stroke();
            context.fill();
        }
    </script>
</body>

三、爱心

<body>
    <canvas id="mycanvas" width="400px" height="400px">
        <!-- 遇到不支持的浏览器  用于提示用户 -->
        <h2>您的浏览器不支持canvas,请换成谷歌浏览器</h2>
    </canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        //创建画笔
        var context = canvas.getContext("2d");
        context.fillStyle = "red";
        context.beginPath();
    
        context.lineStyle = "red";
        context.moveTo(75,40)
        //左半边的桃心，从凹进去的地方开始画
        context.bezierCurveTo(75,40,70,25,50,25);
        context.bezierCurveTo(20,30,20,60,20,60);
        context.bezierCurveTo(20,80,40,102,75,120);
        
        //右半边的桃心，从桃心尖尖部分开始画
        context.bezierCurveTo(110,100,130,80,130,60);
        context.bezierCurveTo(130,65,130,25,100,25);
        context.bezierCurveTo(85,25,75,35,75,40);
        context.stroke();
        context.fill();
    </script> 
</body>

四、五角星

        //获取元素
        var c = document.getElementById("canvas");
        var context = c.getContext("2d");
            //绘制五角星
            context.beginPath();
            //moveTo(x,y):将绘图游标移动到（x,y），不画线
            context.moveTo(0,100);
            //lineTo(x,y):从上一点开始绘制一条直线，到(x,y)为止。
            context.lineTo(300,100);
            context.lineTo(60,300);
            context.lineTo(150,0);
            context.lineTo(240,300);
            context.closePath();
            context.stroke();

            context.beginPath();
            context.moveTo(300,100);
            context.lineTo(420,100);
            context.lineTo(450,0);
            context.lineTo(480,100);
            context.lineTo(600,100);
            context.lineTo(510,180);
            context.lineTo(540,300);
            context.lineTo(450,230);
            context.lineTo(360,300);
            context.lineTo(390,180);
            context.closePath();
            context.stroke();
            
            context.fillStyle="red";
            context.beginPath();
            context.moveTo(600,100);
            context.lineTo(720,100);
            context.lineTo(750,0);
            context.lineTo(780,100);
            context.lineTo(900,100);
            context.lineTo(810,180);
            context.lineTo(840,300);
            context.lineTo(750,230);
            context.lineTo(660,300);
            context.lineTo(690,180);
            context.fill();
            //五角星结束