用canvas绘制星空

Html

Css

window.onload = function() {

var canvas = document.getElementById('canvas')
    canvas.width = 1000
    canvas.height = 800
    var context = canvas.getContext('2d')
    var skyStyle = context.createRadialGradient(canvas.width / 2, canvas.height, 0, canvas.width / 2, canvas.height, canvas.height)
    skyStyle.addColorStop(0, 'black');
    //linearGradient.addColorStop(0.5,'red');
    skyStyle.addColorStop(0.5, '#035');

context.fillStyle = skyStyle
    context.fillRect(0, 0, canvas.width, canvas.height)
    for (i = 0; i < 200; i++) {
        var r = Math.random() * 5 + 5
        var x = Math.random() * canvas.width
        var y = Math.random() * canvas.height * 0.65
        var a = Math.random() * 360
        drawStroke(context, x, y, r, r / 2, a)
    }

function drawStroke(cxt, x, y, R, r, rot) {
        cxt.beginPath()
        for (var i = 0; i < 5; i++) {
            cxt.lineTo(Math.cos((18 + i * 72 - rot) / 180 * Math.PI) * R + x, -Math.sin((18 + i * 72 - rot) / 180 * Math.PI) * R + y)
            cxt.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * r + x, -Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * r + y)
        }

cxt.closePath()

cxt.fillStyle = "#fb3"
        cxt.strokeStyle = "#fd5"
        cxt.lineWidth = 3
        // context.lineJoin = "bevel"
        cxt.lineJoin = "round"
        cxt.fill()
        cxt.stroke()
    }

}

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

立即下载

用canvas绘制星空



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

更新时间：2022-05-30 01:47:52

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

王有久

相关代码

用canvas绘制星空

最新