canvas红色纹理圈圈放大动画效果代码-html代码-BFW代码库

canvas红色纹理圈圈放大动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas红色纹理圈圈放大动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

<style>
    /**
 * CSS for Hartcore
 * Alexandre Andrieux @2015
 */

*,
body,
html {
	margin: 0;
	padding: 0;
	white-space: nowrap;
	position: absolute;
	font-family: 'Yanone Kaffeesatz', sans-serif;
	overflow: hidden;
	/* No selection */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	/* No unwanted drag */
	-webkit-user-drag: none;
	user-drag: none;
	cursor: default;
}
html,
body {
	height: 100%;
	width: 100%;
}
canvas {
	z-index: 0;
  background: #111;
}
#black {
	z-index: 0;
}
</style>
</head>
<body>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
  <script >
      
      /**
 * JS for Hartcore
 * Alexandre Andrieux @2015
 */

var hc = {};
hc.worlds = [];
hc.startTime;
hc.anim;

hc.summon = function() {
	for (key in arguments) {
		this.worlds.push(arguments[key]);
	}
}
hc.ignite = function() {
	this.startTime = new Date().getTime();
	this.igniteWorlds();
	this.frame();
}
hc.frame = function() {
	hc.paint(new Date().getTime());
	hc.anim = window.requestAnimationFrame(hc.frame);
}
hc.paint = function(t) {
	for (key in hc.worlds) {
		hc.worlds[key].world.update(t - hc.startTime);
	}
}
hc.igniteWorlds = function() {
	for (key in this.worlds) {
		this.worlds[key].world.ignite(this.worlds[key].args);
	}
}

/**
 * JS for Hartcore hc_black
 * Alexandre Andrieux @2015
 * Black canvas
 */

var hc_black = {
	name: "black",
	ignite: function() {
		
		var canvas = document.createElement('canvas');
		canvas.class = "hart";
		canvas.id = this.name;
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		document.body.appendChild(canvas);
		
		this.canvas = document.getElementById(canvas.id);
		this.ctx = this.canvas.getContext('2d');

		/* Background */
		this.background();
	},
	background: function() {
		this.ctx.rect(0, 0, this.canvas.width, this.canvas.height);
    var grd = this.ctx.createRadialGradient(300, 300, 0, 300, 300, 500);
    var grd = this.ctx.createRadialGradient(this.canvas.width/2, this.canvas.height/2, 0, this.canvas.width/2, this.canvas.height/2, Math.max(this.canvas.height, this.canvas.width));
    grd.addColorStop(0, "#111");
    grd.addColorStop(1, "#000");

    // Fill with gradient
    this.ctx.fillStyle = grd;
		this.ctx.fill();
	},
	update: function(t) {
		//this.evolve(t);
		//this.move();
		//this.draw();
	},
	evolve: function(t) {
		
	},
	move: function() {
		
	},
	draw: function() {
		
	},
};

/**
 * JS for Hartcore hc_maya
 * Alexandre Andrieux @2015
 * Maya world
 */

var hc_maya = {
	name: "maya",
	ignite: function() {
		var canvas = document.createElement('canvas');
		canvas.class = "hart";
		canvas.id = this.name;
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		document.body.appendChild(canvas);
		
		this.canvas = document.ge.........完整代码请登录后点击上方下载按钮下载查看