HTML5技术里面的canvas如何绘制星空效果

html-css017

HTML5技术里面的canvas如何绘制星空效果,第1张

<html><head> <title>canvas绘制星空效果</title> <META http-equiv="X-UA-Compatible" content="IE=edge"></META> <META http-equiv="Content-Type" content="text/htmlcharset=gb2312"/> <script> var BW = 800//canvas width var BH = 600//canvas height var MAX_STAR_SIZE = 3var MAX_STAR_SPEED = 1 var STAR_COUNT = 120 var BGCOLOR = "black" var ctxvar stars = []function rndf(n){ return Math.floor(Math.random()*n)} function rndc(n){ return Math.ceil(Math.random()*n)} function Star(){ this.reset = function(){ this.x = 0this.y = rndf(BH) this.size = rndc(MAX_STAR_SIZE)this.vx = MAX_STAR_SPEED*this.size/MAX_STAR_SIZEthis.vy = 0this.color = "rgba("+rndf(255)+", "+rndf(255)+", "+rndf(255)+", 0.5)"}this.reset()this.x = rndf(BW)} function render(){ ctx.globalCompositeOperation = "source-over" ctx.fillStyle = "rgba(0, 0, 0, 0.3)"ctx.fillRect(0, 0, BW, BH) ctx.globalCompositeOperation = "lighter" for(var i = 0i <STAR_COUNT++i){ var p = stars[i]ctx.beginPath() var gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.size) gradient.addColorStop(0, "white")gradient.addColorStop(0.4, "white") gradient.addColorStop(0.4, p.color)gradient.addColorStop(1, "black") ctx.fillStyle = gradientctx.arc(p.x, p.y, p.size, Math.PI*2, false)ctx.fill() p.x += p.vxp.y += p.vyif(p.x<=0 || p.x>=BW || p.y<=0 || p.y>=BH){ p.reset()} } } function init(){ if (!window.console) { console = {log:function(){},debug:function(){}}} //create canvas var cv = document_createElement_x('canvas')cv.width = BWcv.height = BH cv.style.background = BGCOLORdocument.body.a(cv) ctx = cv.getContext("2d")//create all stars for(var i=0i<STAR_COUNT++i){ var s = new Star()stars.push(s)} setInterval(render, 33)} </script> </head><body onLoad="init()"></body></html> 原文来自： http://blog.sina.com.cn/s/blog_a4e9028f0101erwr.html

html5特效代码旋转的星空，首先要设置背景为暗一点的背景色或者图片，例如设置成黑色的背景颜色，然后把代码复制到html文件里，设置下下方JS里的一些设置，如星星的数量、星星移动的范围、星星的大小等，保存后用支持html5的浏览器打开就能看到旋转的星空特效。

温馨提示：如果使用复制按钮代码出现错误，建议使用ctrl+c来复制代码。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>旋转的星空</title>

<style type="text/css">

body{background: blackpadding: 0margin: 0overflow:hidden}

.header{margin: 0 autowidth: 100%height: 100%background-color: #000position: relative}

</style>

</head>

<body>

<div class="header"><canvas id="canvas"></canvas></div>

<script>

var canvas = document.getElementById('canvas'),

ctx = canvas.getContext('2d'),

w = canvas.width = window.innerWidth,

h = canvas.height = window.innerHeight,

hue = 217,

stars = [],

count = 0,

maxStars = 3000//星星数量

var canvas2 = document.createElement('canvas'),

ctx2 = canvas2.getContext('2d')

canvas2.width = 100

canvas2.height = 100

var half = canvas2.width / 2,

gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half)

gradient2.addColorStop(0.025, '#CCC')

gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)')

gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)')

gradient2.addColorStop(1, 'transparent')

ctx2.fillStyle = gradient2

ctx2.beginPath()

ctx2.arc(half, half, half, 0, Math.PI * 2)

ctx2.fill()

// End cache

function random(min, max) {

if (arguments.length <2) {

max = min

min = 0

}

if (min >max) {

var hold = max

max = min

min = hold

}

return Matwww.scxhdzs.com#or(Math.random() * (max - min + 1)) + min

}

function maxOrbit(x, y) {

var max = Math.max(x, y),

diameter = Math.round(Math.sqrt(max * max + max * max))

return diameter / 2

//星星移动范围，值越大范围越小，

}

var Star = function() {

this.orbitRadius = random(maxOrbit(w, h))

this.radius = random(60, this.orbitRadius) / 8

//星星大小

this.orbitX = w / 2

this.orbitY = h / 2

this.timePassed = random(0, maxStars)

this.speed = random(this.orbitRadius) / 50000

//星星移动速度

this.alpha = random(2, 10) / 10

count++

stars[count] = this

}

Star.prototype.draw = function() {

var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,

y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,

twinkle = random(10)

if (twinkle === 1 &&this.alpha >0) {

this.alpha -= 0.05

} else if (twinkle === 2 &&this.alpha <1) {

this.alpha += 0.05

}

ctx.globalAlpha = this.alpha

ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius)

this.timePassed += this.speed

}

for (var i = 0i <maxStarsi++) {

new Star()

}

function animation() {

ctx.globalCompositeOperation = 'source-over'

ctx.globalAlpha = 0.5//尾巴

ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)'

ctx.fillRect(0, 0, w, h)

ctx.globalCompositeOperation = 'lighter'

for (var i = 1, l = stars.lengthi <li++) {

stars[i].draw()

}

window.requestAnimationFrame(animation)

}

animation()

</script>

</body>

</html>