canvas五角星

来源：互联网发布：科讯cms 编辑：程序博客网时间：2024/04/28 20:41
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>画五角星</title></head><body><canvas id="canvas"></canvas><script>    window.onload=function () {        var dom = document.getElementById("canvas");        dom.width = 800;        dom.height = 800;        var ctx = dom.getContext("2d");        ctx.fillStyle = "black";        ctx.fillRect(0, 0, dom.width, dom.height);        for (var i = 0; i < 100; i++) {        var r=Math.random()*10+10;        var x=Math.random()*dom.width;        var y=Math.random()*dom.height;        var a=Math.random()*360;        drawstar(ctx, x,y,r,r/2.0,a);    }    }function  drawstar(cnt,x,y,R,r,rot) {    cnt.beginPath();    for(var i=0;i<5;i++){        cnt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,            -Math.sin((18+i*72-rot)/180*Math.PI)*R+y);        cnt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,            -Math.sin((54+i*72-rot)/180*Math.PI)*r+y);    }    cnt.closePath();    cnt.fillStyle="#fb3";    cnt.strokeStyle="#f05";   cnt.lineWidth=3;    cnt.lineJoin="round";    cnt.fill();    cnt.stroke();}</script></body></html>
0 0