canvas流星月亮星星银河
这是页面的特效,首先月亮直接出现,然后星星和银河渐渐的出现(一闪一闪),最后流星划过,留下完美的句点。
所有的动画都是通过帧来实现的。
星星的代码分为2部分,首先是随机生成星星,然后是绘制星星,最后是星星的帧动画。
随机生成星星代码:
function newStar(num,width,height) { var stars = []; /// 恒星 for(var i = 0; i < num; i++) { var x = Math.round(Math.random() * width); var y = Math.round(Math.random() * height); //避开月亮 if(y > 100 && y <400) { if(x > width - 300 && x < width -250) { x = x - 100; } else if(x > width - 250 && x < width -200) { x = x + 100; } } var star = { x: x, y: y, r:Math.round(Math.random()*4), alpha:0,//Math.random(), valpha:(Math.random()/70)*(Math.random() > .5 ? -1 : 1),//随机+- 星星透明度改变加速度 } stars.push(star); } return stars; }
然后是如何绘制星星:
function drawStar(cxt, x, y, r, alpha) { cxt.beginPath(); var draw = cxt.createRadialGradient(x, y, 0, x, y, r); // x0 渐变的开始圆的 x 坐标 // y0 渐变的开始圆的 y 坐标 // r0 开始圆的半径 // x1 渐变的结束圆的 x 坐标 // y1 渐变的结束圆的 y 坐标 // r1 结束圆的半径 draw.addColorStop(0,'rgba(255,255,255,'+ alpha +')'); draw.addColorStop(1,'rgba(255,255,255,0)'); cxt.fillStyle = draw; cxt.arc(x, y, r, 0, Math.PI*2, true); // x 圆的中心的 x 坐标。 // y 圆的中心的 y 坐标。 // r 圆的半径。 // sAngle 起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。 // eAngle 结束角,以弧度计。 // counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。 cxt.fill(); cxt.closePath(); }
最后是动画(这部分比较简单)
cxt.clearRect(0,0,w,h);//清空画布 ////绘制星星 // console.log(self.stars) for(var i = 0; i < num; i++) { drawStar(cxt, stars[i].x, stars[i].y, stars[i].r, stars[i].alpha); ///改变星星亮度 if(stars[i].alpha < 0 || stars[i].alpha > 1) { stars[i].valpha = stars[i].valpha * -1; } stars[i].alpha += stars[i].valpha; }
接下来说的是月亮,月亮比较简单,就是画一个圆形,一个渐变的背景。
function drawMoon(cxt, w, h) { var moon = cxt.createRadialGradient(w - 300, 200, 17.5, w - 300, 200, 150); //径向渐变 moon.addColorStop(0, 'rgba(255,255,255,.9)'); moon.addColorStop(0.01, 'rgba(70,70,80,.9)'); moon.addColorStop(0.2, 'rgba(40,40,50,.95)'); moon.addColorStop(0.4, 'rgba(20,20,30,.8)'); moon.addColorStop(1, 'rgba(0,0,10,0)'); cxt.beginPath(); cxt.save() cxt.fillStyle = moon; cxt.fillRect(0, 0, w, h); cxt.restore(); cxt.fill(); cxt.closePath(); }
让然后是流星
流星的生成比较简单就是比星星多了一个随机的速度。
流星的绘画就是一个半圆+渐变的超长三角形
function drawlineStar(cxt, x, y, r, len) { ///半圆 cxt.beginPath(); var draw = cxt.createRadialGradient(x, y, 0, x, y, r); draw.addColorStop(0,'rgba(255,255,255,1)'); draw.addColorStop(1,'rgba(255,255,255,0)'); cxt.fillStyle = draw; cxt.arc(x, y, 1, Math.PI / 4, 5 * Math.PI / 4); cxt.fill(); cxt.closePath(); ///三角形 cxt.beginPath(); var tra = cxt.createLinearGradient(x - len, y - len, x, y); tra.addColorStop(0, 'rgba(0,0,0,0)'); tra.addColorStop(1, 'rgba(255,255,255,1)'); cxt.strokeStyle = tra; cxt.moveTo(x, y); cxt.lineTo(x - len, y - len); cxt.fill(); cxt.stroke(); cxt.closePath(); }
大概就这样子,细节就自己研究吧!!!!
有活要干~~~
See the Pen Moon by to_Matthew (@to_Matthew) on CodePen.
<----------------------其实下一步是准备做,canvas和鼠标之间的交互-------------------------->
先做一下自我提示,点击事件
canvas.onxxx,等到当前的屏幕的clickX,Y。用canvas.getBoundingClientRect() (x:x-canvas.getBoundingClientRect().left , y:y-canvas.getBoundingClientRect().top)
得到相对canvas的X,Y值。
然后可以比较canvas点的数据X,Y值。
然后就是做相应的交互啦~~~~~