canvas 满天星

最新推荐文章于 2025-11-28 04:56:28 发布

转载最新推荐文章于 2025-11-28 04:56:28 发布 · 191 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/frog2008/p/5191614.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用HTML5 Canvas和JavaScript绘制满天星与月亮的简单教程。通过设置画布尺寸，填充背景，随机绘制星星，并添加月亮元素，实现了浪漫的夜空效果。此外，还介绍了如何加载并显示图片。

<script type="text/javascript" src="jquery-2.2.0.min.js"></script>

<canvas id="canvas" width="750" height="1134"></canvas>

<script>

    //绘制满天星
    function draw(id) {

        var canvas = document.getElementById(id);
        var context = canvas.getContext('2d');
        context.fillStyle = "#000";
        //context.strokeStyle = "#f60";
        //context.lineWidth = 5;
        context.fillRect(0, 0, 750, 1134);

        //context.fillStyle = "#fff";
        //context.fillText("fillText", 0, 0);

        //********************************** 星星
        context.font = "bold 14px Arial";
        context.textAlign = "left";
        context.textBaseline = "top";
        //context.strokeStyle = "red";

        context.fillStyle = "#fff";
        //context.fillText("*", 0, 0);

        //for (var i = 0; i < 300; i++) {

        //               g.drawString("*", (int) (Math.random() * 1024),

        //                               (int) (Math.random() * 768));

        //}

        for (var i = 0; i < 300; i++) {

            context.fillText("*", Math.random() * 750,

                            Math.random() * 1134);

        }

        //********************************* 月亮
        //g.fillOval(800, 100, 100, 100);

        //g.setColor(Color.BLACK);

        //g.fillOval(780, 80, 100, 100);
        context.beginPath();

        context.arc(400, 100, 50, 0, 2 * Math.PI, true);
        context.closePath();
        context.fillStyle = '#f6ee74';
        context.fill();

        context.beginPath();

        context.arc(380, 80, 50, 0, 2 * Math.PI, true);
        context.closePath();
        context.fillStyle = "#000";
        context.fill();

        //********************************* 加载图片
        var beauty = new Image();
        beauty.src = "1.png";
        beauty.onload = function () //确保图片已经加载完毕
        {

            context.drawImage(beauty, 100, 100, 400, 600);
        }

    }

    $(function () {
        draw("canvas");

        var canvas = document.getElementById("canvas");
        canvas.onclick = function () {
            var context = canvas.getContext('2d');
            context.font = "bold 14px Arial";
            context.textAlign = "left";
            context.textBaseline = "top";
            context.fillStyle = "#fff";
            for (var i = 0; i < 300; i++) {

                context.fillText("*", Math.random() * 750,

                                Math.random() * 1134);

            }
        };

    });
</script>

转载于:https://www.cnblogs.com/frog2008/p/5191614.html