Canvas画雪花图~

<canvas id="myCanvas">你的浏览器不支持canvas</canvas>

额….记得给body设置个颜色，你才能看到效果，还有给canvas画布设置一个大小。

var canvas=document.querySelector("#myCanvas");
snow(canvas);
//canvas这个参数是获取的dom元素，
function snow(canvas){var context=canvas.getContext('2d');//微粒子创建数组var particles=[];for(var j=0;j<500;j++){particles.push({//设置雪花的初始位x，y  x,y向上的速度，以及雪花的大小颜色，随机生成的x:Math.random()*window.innerWidth,y:Math.random()*window.innerHeight,vx:Math.random()*1-0.5,vy:Math.random()*1+0.5,size:1+Math.random()*2,color:'#fff'})}//进行绘制function timeUp(){context.clearRect(0,0,window.innerWidth,window.innerHeight);//清除画布var particle;for(var i=0;i<500;i++){//遍历所有的雪花particle=particles[i];particle.x+=particle.vx;//更新雪花的新的x,y位置particle.y+=particle.vy;if(particle.x<0){particle.x=window.innerWidth;//如果雪花的位置放在了左侧意外，然后使其显示在窗口右边}if(particle.x>window.innerWidth){particle.x=0;}if(particle.y>=window.innerHeight){particle.y=0;}//设置雪花颜色context.fillStyle=particle.color;context.beginPath();//开始绘制雪花context.arc(particle.x,particle.y,particle.size,0,Math.PI*2);//绘制圆形context.closePath();//必和路径context.fill();}}setInterval(timeUp,40);
}

其实也不难，500是控制雪花数量的，然后在生成雪花的位置，把它保存在一个数组里面，每次绘制之前要先把画布清除，不然原来越多，然后开始一个一个点绘制，这里有一个范围判断，就是在窗口左右的判断。
e….感觉也没什么难的…有问题再问我吧~~~~

Canvas画雪花图~相关推荐

使用canvas画折线图和曲线图
使用canvas画折线图和曲线图贝塞尔曲线如果想要在p0=>p2的过程中经过p1,那么需要计算出pc的值,在canvas之中作为控制点二次贝塞尔曲线转换为三次上面只是简单介绍,具体的参考文 ...
微信小程序canvas画价格走势图（三）
今天继续更新在微信小程序上用canvas画价格走势图.上一篇讲了图上主要的部分,也就是折线图的绘制.假如我在我的绘图主函数中只调用了绘制折线图的函数,效果是这样的: 可以说除了作为坐标背景的<i ...
微信小程序canvas画价格走势图（一）
今天是周二,今天来开一个新坑吧.最近花了整整两个工作日的时间画了一个微信小程序端的价格走势图,现在来分享一下经验. 因为内容比较多,所以打算这次分为多篇博客来写,这样一篇博客的内容就会更少.更清晰.下 ...
微信小程序canvas画价格走势图（五）
最近比较忙,所以趁着今年的最后一个周末,来把最后两篇完结掉.这是倒数第二篇了,这一篇的内容很简单,讲的是细节的绘制,也就是底部的刻度线和日期的绘制,以及一个小小的总结. 目前我们完成了canvas的准 ...
微信小程序canvas画价格走势图（六）
到上一篇,可以说,所有的工作已经完成了,那为什么还会有第六篇呢?因为,客户改需求了,UI设计图改了,我也就不得不改代码,画一个新的版本出来.我在大功告成,开始写第一篇的时候突然改的,我也就准备加一篇来 ...
用canvas画环形图
var ratios = [['35%','30%','20%','10%','5%'],['20%','10%','35%','5%','30%'],['25%','15%','15%','25%' ...
canvas 画背景图以及文字换行的写法
// 文字换行的设置setCompanyTitle(){let width = 0.13;let height = 0.35;this.ctx.font="14px Verdana" ...
如何使用canvas画玫瑰图
类似于这种样式.鼠标放上去还要有内容显示. 代码如下 <!DOCTYPE html> <html><head><title>Canvas Line Lo ...
canvas画八卦图
methods:{getapp(){var canvas=document.getElementById('wholeCanvas')this.canvas2d=canvas.getContext(' ...

Canvas画雪花图~

Canvas画雪花图~相关推荐

最新文章

热门文章