可以的
例如下面这段代码
body{background: url(图片) no-repeat 0 0 transparent
background-size: 200% auto//防止图片不够大
}
<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欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）