html5粒子形成图案,html5 canvas粒子形成下雪背景的效果

本篇文章给大家带来的内容是关于html5 canvas粒子形成下雪背景的效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

canvas粒子形成下雪背景

body{

margin: 0px;

padding: 0px;

}

#canvas{

display: block;

background: #222;

}

var canvas = document.getElementById("canvas");//获取canvas

var ctx = canvas.getContext("2d");//创建画笔

var w = canvas.width = window.innerWidth;//浏览器宽度

var h = canvas.height = window.innerHeight;//浏览器高度

window.onresize = function(){

w = canvas.width = window.innerWidth;

h = canvas.height = window.innerHeight;

};//当浏览器刷新的时候刷新

var num = 1000;//数量

var shuju = [];//空数组

for(i = 0;i

shuju.push({//数组末项添加

x : Math.random()*w,

y : Math.random()*h,

r : Math.random()*2

});

draw(shuju[i].x,shuju[i].y,shuju[i].r)//for循环循环darw function

};

console.log(shuju[0]);

function draw(x1,y1,r1){

ctx.beginPath();//开始绘画

ctx.fillStyle = "#fff";//颜色

ctx.arc(x1,y1,r1,0,2*Math.PI,false)//arc园

ctx.fill();//填充

}

function chageY(){

for(var i = 0;i

shuju[i].y = Math.random()*5;

if(shuju[i].y > h){//大于高度

shuju[i].y = 0;//等于0

}

draw(shuju[i].x,shuju[i].y,shuju[i].r);//调取

}

setInterval(function(){

ctx.clearRect(0,0,w,h);//清楚画布 0 0 高度宽度

chageY();

},10);

html5粒子形成图案,html5 canvas粒子形成下雪背景的效果相关推荐

用html5编写五星红旗图案,HTML5画出五星红旗 | 编程知识库
源码: 中国标准国旗 /** 使用HTML5绘制标准五星红旗 */ var canvas = document.getElementById("canvas"); var cont ...
html5波浪效果,html5 canvas粒子波浪动画特效
特效描述:html5 canvas 粒子波浪动画特效.html5基于canvas绘制波涛汹涌的粒子波浪动画. 代码结构 1. HTML代码 'use strict'; var FastRandom = ...
html5实现粒子效果的文字,利用HTML5实现Canvas粒子文字特效
特效描述:利用HTML5实现 Canvas 粒子文字特效.利用HTML5实现Canvas粒子文字特效代码结构 1. HTML代码 change /*jshint esversion:6*/ var ...
html5 照片汇聚logo,利用HTML5实现Canvas粒子汇聚文字特效
特效描述:利用HTML5实现 Canvas 粒子汇聚文字特效.利用HTML5实现Canvas粒子汇聚文字特效代码结构 1. HTML代码 jQuery Chinaz // WRITTEN BY T ...
html图像粒子转换动画,html5 canvas粒子动画生成图片特效
特效描述:html5 canvas 粒子动画生成图片特效.html5基于canvas粒子化图片利用easying.js公式计算粒子动态轨迹方程, x轴方向和y轴方向的公式均可以选择可以设置粒子运 ...
html5游戏制作人物原图,HTML5 canvas粒子生成人物面部轮廓插件
这是一款使用js制作的html5 canvas粒子生成人物面部轮廓插件.该js插件可以扫描图片中的人物面部阴暗和高亮面,并生成canvas也能够圆点来描绘出脸部轮廓.还可以用鼠标来和粒子进行互动. 使 ...
html烟花特效案例,HTML5前端特效库 css3 按钮粒子烟花特效源码
HTML5前端特效库 css3 按钮粒子烟花特效源码效果图各位长友大家上午好! 今天给大家带来的是 css3 按钮粒子烟花特效源码! 大家可以按照自己的意愿进行修改! 有想要文件版源码的可以在我 ...
html5 svg画钟表,html5 svg创意卡通粒子时钟动画特效
非常简单可爱的一款html5 svg绘制的创意卡通粒子时钟动画特效,时钟走动指针动画非常有意思. 查看演示下载资源: 12 次下载资源下载积分: 20 积分 js代码 // Utilities ...
原生js实现canvas粒子特效
要实现的效果当鼠标移入容器时,让鼠标作为中心点半径为80到圆内的粒子散开当粒子不在圆的范围后,粒子返回原来的位置主要代码创建初始位置 // NUM_PARTICLES是粒子总个数for ( i ...

html5粒子形成图案,html5 canvas粒子形成下雪背景的效果

html5粒子形成图案,html5 canvas粒子形成下雪背景的效果相关推荐

最新文章

热门文章