HTMLCanvas五星红旗

来源：互联网发布：qt5 socket编程编辑：程序博客网时间：2024/04/28 07:50

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>fivestar</title>    <script>        function star(ctx,a,b,s) {            ctx.beginPath();            ctx.fillStyle="rgb(255,255,0)";            //var s = 20;            var dig = 2.5;            var x = Math.sin(0);            var y = Math.cos(0);            for(var i=0;i<5;i++){                var x = Math.sin(i*dig);                var y = Math.cos(i*dig);                ctx.lineTo(a+s*x,b+s*y);            }            ctx.closePath();            ctx.fill();        }        function draw(id) {            var canvas = document.getElementById(id);            var ctx = canvas.getContext("2d");            ctx.fillStyle = "red";            ctx.fillRect(0,0,600,400);            star(ctx,180,30,20);            star(ctx,210,90,20);            star(ctx,210,150,20);            star(ctx,170,200,20);            star(ctx,90,90,50);        }    </script></head><body onload="draw('canvas')" ><canvas id="canvas" width="600" height="400"></canvas></body></html>

自己用刚学的Canvas写的挺有成就感

0 0