canvas之背景特效
需具备js基础知识以及canvas相关方法(可查阅相关文档)
下面是一篇有关js与canvas的背景特效
基于面向过程的思维
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#canvas {
display: block;
background: #000;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
window.requestAnimationFrame =(function(){//解决定时器卡问题，使用帧动画
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback){
window.setInterval (callback,1000/60);
};
})();
//初始化变量
var canv=document.getElementsByName("canvas");
var cxt=canvas.getContext("2d");
var w,h;
var num=200;
var data=[];
var move={};
window.onresize=init;//在浏览器窗口变化时重置
init();
//获取浏览器宽高并使粒子随机分布
function init(){
canvas.width = window.innerWidth ;
canvas.height = window.innerHeight ;
w = canvas.width;
h = canvas.height;
for(var i=0;i<num;i++){
data[i]={x:Math.random()*w,y:Math.random()*h,cX:Math.random()*0.6-0.3,cY:Math.random()*0.6-0.3};
Cricle(data[i].x,data[i].y);
}
}
//绘制粒子
function Cricle(x,y){
cxt.save();
cxt.fillStyle ="pink";
cxt.beginPath ();
cxt.arc (x,y,0.5,Math.PI*2,false);
cxt.closePath ();
cxt.fill ();
cxt.restore ();
}
//自执行使粒子运动
!function draw(){
cxt.clearRect(0,0,w,h);//清除，防止粒子运动成线
for(var i=0;i<num;i++){
data[i].x+=data[i].cX;//粒子运动
data[i].y+=data[i].cY;
if(data[i].x>w||data[i].x<0) data[i].cX=-data[i].cX;//设置边界值判断防止粒子跑出边界
if(data[i].y>h||data[i].y<0) data[i].cY=-data[i].cY;
Cricle(data[i].x,data[i].y);
for(var j=i+1;j<num;j++){
//使粒子连线
if((data[i].x-data[j].x)*(data[i].x-data[j].x)+(data[i].y-data[j].y)*(data[i].y-data[j].y)<=50*50){
line(data[i].x,data[i].y,data[j].x,data[j].y,false);
}
//使粒子与鼠标连线
if(move.x){
if((data[i].x-move.x)*(data[i].x-move.x)+(data[i].y-move.y)*(data[i].y-move.y)<=100*100){
line(data[i].x,data[i].y,move.x,move.y,true);
}
}
}
}
window.requestAnimationFrame(draw);//定时器
// setInterval(function(){
// draw();
// },130);
}();
//使粒子的连线颜色渐变
function line(x1,y1,x2,y2,isMove){
var color=cxt.createLinearGradient(x1,y1,x2,y2);
if(!isMove){
color.addColorStop(0,"yellow");
color.addColorStop(1,"pink");
}else{
color.addColorStop(0,"#fff");
color.addColorStop(1,"#0bd2dd");
}
cxt.save();
cxt.strokeStyle=color;
cxt.beginPath();
cxt.moveTo(x1,y1);
cxt.lineTo(x2,y2);
cxt.stroke();
cxt.restore();
}
//鼠标移入与粒子连线
document.onmousemove=function(e){
move.x= e.clientX;
move.y= e.clientY;
}
</script>
</body>
</html>
canvas之背景特效的更多相关文章
- canvas星空背景特效+CSS旋转相册学习
今天在看帖子的时候,看到了个有趣的css旋转相册,刚好之前做了一个星空背景dome,这里给大家分享下代码: 旋转相册参考:https://blog.csdn.net/gitchatxiaomi/art ...
- 一款由html5 canvas实现五彩小圆圈背景特效
之前介绍了好几款html5 canvas实现的特效.今天要为大家介绍一款由html5 canvas实现五彩小圆圈背景特效.五彩的小圆圈渐显渐失的特效.效果图如下: 在线预览 源码下载 html代码 ...
- 使用Canvas绘制背景图
原文 http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...
- HTML5 canvas生成图片马赛克特效插件
HTML5 canvas生成图片马赛克特效插件 简要教程 这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...
- Canvas与javaScript特效笔记
第六章 Canvas与javaScript特效笔记 q <canvas>标签的用途 HTML5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强 ...
- CANVAS模仿龙卷风特效
大学时候,有一段时间对flash比较感兴趣.去图书馆借了一本很厚很厚的falsh书籍. 翻了几页之后,就再没有往后看过.印象比较深的是作者说他用flash完成了一个龙卷风效果. 一直到现在我也没有看到 ...
- [Canvas]动态背景
欲查看动态效果请点击下载代码再用Chrome或Firefox打开index.html 图例: 代码: <!DOCTYPE html> <html lang="utf-8&q ...
- WEB入门.八 背景特效
学习内容 background属性 CSS Sprite 技术 滑动门技术 能力目标 使用background设置网页背景 使用Sprites制作平滑投票特效 使用滑动门技术实现Tab菜单 本章简介 ...
- 结合canvas做雨滴特效
雨滴特效 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
随机推荐
- Github上600多个iOS开源项目地址
将Github上600多个iOS开源项目进行分类并且有相应介绍,小伙伴们快来看呀 地址:http://github.ibireme.com/github/list/ios/
- 向Github提交更改的代码
更改了本地的某一文件的代码,那么如何覆盖Github上的同一文件代码呢?请看以下步骤: 1.先用 git status 看你更改了哪些文件: 2.然后 git add 你想要提交的更改的文件 或者 g ...
- Java SpringMVC学习--基础配置
快速开始一个基于SpringMVC框架的web项目 开发工具 Eclipse neon.2 运行环境 tomcat8.5 1.在Eclipse中新建一个web项目:File-New-Dynamic W ...
- js笔记 标签： javascript 2016-08-01 13:30 75人阅读 评论(0) 收藏
typeof可以用来检测给定变量的数据类型,typeof是一个操作符而不是函数,所以圆括号可以省略. Undefined类型只有一个值,即特殊的undefined.在使用var声明变量但未对其加以初始 ...
- 获取所有权windows目录所有权
Takeown /r /f 盘符:\目录\目录 例如: Takeown /r /f C:\Windows\CSC
- 如何在 MSBuild Target（Exec）中报告编译错误和编译警告
编译错误和编译警告 MSBuild 的 Exec 自带有错误和警告的标准格式,按照此格式输出,将被识别为编译错误和编译警告. 而格式只是简简单单的 error: 开头或者 warning: 开头.冒号 ...
- python实现读取类别频数数据画水平条形图
1.数据分组-->频数分布表 环境配置: import pandas as pd import numpy as np import matplotlib.pyplot as plt 按照你设定 ...
- NET Core Web API下事件驱动型架构CQRS架构中聚合与聚合根的实现
NET Core Web API下事件驱动型架构在前面两篇文章中,我详细介绍了基本事件系统的实现,包括事件派发和订阅.通过事件处理器执行上下文来解决对象生命周期问题,以及一个基于RabbitMQ的事件 ...
- c3p0-0.9.1.2.jar
C3P0是一个开源的JDBC连接池,它实现了数据源和JNDI绑定,支持JDBC3规范和JDBC2的标准扩展.目前使用它的开源项目有Hibernate,Spring等
- 十、IntelliJ IDEA 中 Project 和 Module 的概念及区别
在 IntelliJ IDEA 中,没有类似于 Eclipse 工作空间(Workspace)的概念,而是提出了Project和Module这两个概念.接下来,就让咱们一起看看 IntelliJ ID ...