canvas笔记-画一片星空- 前端开发

程序运行截图如下：

源码如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
    当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>
 
<script>
    window.onload = function() {
 
        let canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        let context = canvas.getContext("https://cdn.jxasp.com:9143/image/2d");
 
        context.fillStyle = "black";
        context.fillRect(0, 0, canvas.width, canvas.height);
 
        for(let i = 0; i < 200; i++){
 
            let r = Math.random() * 10 + 10;
            let x = Math.random() * canvas.width;
            let y = Math.random() * canvas.height;
            let a = Math.random() * 360;
            drawStar(context, x, y, r, r / 2.0, a);
        }
    }
 
    function drawStar(cxt, x, y, outerR, innerR, rot){
 
        cxt.beginPath();
        for(let i = 0; i < 5; i++){
 
            cxt.lineTo(Math.cos((18 + i * 72 - rot) / 180 * Math.PI) * outerR + x,
                -Math.sin((18 + i * 72- rot) / 180 * Math.PI) * outerR + y);
 
            cxt.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * innerR + x,
                -Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * innerR + y);
        }
 
        cxt.closePath();
 
        cxt.fillStyle = "#fb3";
        cxt.strokeStyle = "#fd5";
        cxt.lineWidth = 3;
        cxt.lineJoin = "round";
 
        cxt.fill();
        cxt.stroke();
    }
 
</script>
 
</body>
</html>

关键词搜索

canvas笔记-画一片星空

详情内容

相关技术文章

最新源码

下载排行榜

提示信息

选择支付方式