canvas五角星

最新推荐文章于 2024-04-15 13:20:28 发布

虔诚的教徒

最新推荐文章于 2024-04-15 13:20:28 发布

阅读量283

点赞数

本文链接：https://blog.csdn.net/huangtianzhu123/article/details/64441991

版权

<!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

收藏

觉得还不错? 一键收藏
0
评论
canvas五角星

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("can
复制链接

扫一扫