canvas五角星、满天星、星空

Html

Css

#canvas1 {
	box-shadow:3px 3px 10px black;
	background:linear-gradient(lightblue,white,darkblue,black);
}

$(function() {
    var canvas = $("#canvas1")[0];
    var context = canvas.getContext("2d");

// 参数 6个
    // R: 外圆半径  r:内圆半径
    // x,y: 星星 坐标
    // wujiao: 星星的角数
    // start_deg: 星星是否旋转
    // color: 颜色
    // is_stroke: 是描边还是填充
    function hua_xingxing(R, r, x, y, wujiao, start_deg, color, is_stroke) {

context.beginPath();
        var jiange_deg = 360 / wujiao
        for (var i = 0; i < wujiao; i++) {
            context.lineTo(Math.cos((start_deg + i * jiange_deg) / 180 * Math.PI) * R + x, Math.sin((start_deg + i * jiange_deg) / 180 * Math.PI) * R + y);
            context.lineTo(Math.cos(((start_deg + jiange_deg / 2) + i * jiange_deg) / 180 * Math.PI) * r + x, Math.sin(((start_deg + jiange_deg / 2) + i * jiange_deg) / 180 * Math.PI) * r + y);
        }
        context.closePath();
        if (is_stroke % 2 == 0) {
            context.strokeStyle = color;
            context.stroke();
        } else {
            context.fillStyle = color;
            context.fill();
        }

}

function my_random(min, max) {
        return parseInt(Math.random() * (max - min + 1)) + min
    }

function my_random_color() {
        return "rgb( " + my_random(0, 255) + ", " + my_random(0, 255) + " , " + my_random(0, 255) + ")"
    }

for (var i = 0; i < 100; i++) {
        var suiji_color = my_random_color()
        hua_xingxing(my_random(5, 20), my_random(5, 10), my_random(5, 490), my_random(5, 250), my_random(4, 8), my_random(5, 20), suiji_color, my_random(100, 200))
    }

});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.0.0

立即下载

canvas五角星、满天星、星空



代码描述：利用canvas绘制星空

canvas 绘制画布
学会话一个五角星
利用for循环和随机函数画出好多不同形状,不同位置,不同大小,不同颜色,不同形态的星星, 放到天空中

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

culiuxiang

相关代码

canvas五角星、满天星、星空

最新