<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 canvas火焰文字动画效果代码DEMO演示</title>
<style>
html, body{
margin : 0px;
width : 100%;
height : 100%;
overflow: hidden;
background-color: #000000;
font-family: sans-serif;
}
#canvasContainer{
margin : 0px;
width : 100%;
height :100%;
}
</style>
</head>
<body>
<div>
</div>
<div id="canvasContainer"></div>
<script type="text/javascript">
/*
* Stats.js 1.1
* http://code.google.com/p/mrdoob/wiki/stats_js
*
*/
function Stats()
{
this.init();
}
Stats.prototype =
{
init: function()
{
this.frames = 0;
this.framesMin = 100;
this.framesMax = 0;
this.time = new Date().getTime();
this.timePrev = new Date().getTime();
this.container = document.createElement("div");
this.container.style.position = 'absolute';
this.container.style.fontFamily = 'Arial';
this.container.style.fontSize = '10px';
this.container.style.backgroundColor = '#000020';
this.container.style.opacity = '0.9';
this.container.style.width = '80px';
this.container.style.paddingTop = '2px';
this.framesText = document.createElement("div");
this.framesText.style.color = '#00ffff';
this.framesText.style.marginLeft = '3px';
this.framesText.style.marginBottom = '3px';
this.framesText.innerHTML = '<strong>FPS</strong>';
this.container.appendChild(this.framesText);
this.canvas = document.createElement("canvas");
this.canvas.width = 74;
this.canvas.height = 30;
this.canvas.style.display = 'block';
this.canvas.style.marginLeft = '3px';
this.canvas.style.marginBottom = '3px';
this.container.appendChild(this.canvas);
this.context = this.canvas.getContext("2d");
this.context.fillStyle = '#101030';
this.context.fillRect(0, 0, this.canvas.width, this.canvas.height );
this.contextImageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
setInterval( bargs( function( _this ) { _this.update(); return false; }, this ), 1000 );
},
getDisplayElement: function()
{
return this.container;
},
tick: function()
{
this.frames++;
},
update: function()
{
this.time = new Date().getTime();
this.fps = Math.round((this.frames * 1000 ) / (this.time - this.timePrev)); //.toPrecision(2);
this.framesMin = Math.min(this.framesMin, this.fps);
this.framesMax = Math.max(this.framesMax, this.fps);
this.framesText.innerHTML = '<strong>' + this.fps + ' FPS</strong> (' + this.framesMin + '-' + this.framesMax + ')';
this.contextImageData = this.context.getImageData(1, 0, this.canvas.width - 1, 30);
this.context.putImageData(this.contextImageData, 0, 0);
this.context.fillStyle = '#101030';
this.context.fillRect(this.canvas.width - 1, 0, 1, 30);
this.index = ( Math.floor(30 - Math.min(30, (this.fps / 60) * 30)) );
this.context.fillStyle = '#80ffff';
this.context.fillRect(this.canvas.width - 1, this.index, 1, 1);
this.context.fillStyle = '#00ffff';
this.context.fillRect(this.canvas.width - 1, this.index + 1, 1, 30 - this.index);
this.timePrev = this.time;
this.frames = 0;
}
}
// Hack by Spite
function bargs( _fn )
{
var args = [];
for( var n = 1; n < arguments.length; n++ )
args.push( arguments[ n ] );
return function () { return _fn.apply( this, args ); };
}
(function (window){
var Sakri = window.Sakri || {};
window.Sakri = window.Sakri || Sakri;
Sakri.MathUtil = {};
//return number between 1 and 0
Sakri.MathUtil.normalize = function(value, minimum, maximum){
return (value - minimum) / (maximum - minimum);
};
//map normalized number to values
Sakri.MathUtil.interpolate = function(normValue, minimum, maximum){
return minimum + (maximum - minimum) * normValue;
};
//map a value from one set to another
Sakri.MathUtil.map = function(value, min1, max1, min2, max2){
return Sakri.MathUtil.interpolate( Sakri.MathUtil.normalize(value, min1, max1), min2, max2);
};
Sakri.MathUtil.hexToRgb = function(hex) {
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function(m, r, g, b) {
return r + r + g + g + b + b;
});
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
Sakri.MathUtil.getRandomNumberInRange = function(min, max){
return min + Math.random() * (max - min);
};
Sakri.MathUtil.getRandomIntegerInRange = function(min, max){
return Math.round(Sakri.MathUtil.getRandomNumberInRange(min, max));
};
}(window));
//has a dependency on Sakri.MathUtil
(function (window){
var Sakri = window.Sakri || {};
window.Sakri = window.Sakri || Sakri;
Sakri.Geom = {};
//==================================================
//=====================::POINT::====================
//==================================================
Sakri.Geom.Point = function (x,y){
this.x = isNaN(x) ? 0 : x;
this.y = isNaN(y) ? 0 : y;
};
Sakri.Geom.Point.prototype.clone = function(){
return new Sakri.Geom.Point(this.x,this.y);
};
Sakri.Geom.Point.prototype.update = function(x, y){
this.x = isNaN(x) ? this.x : x;
this.y = isNaN(y) ? this.y : y;
};
//==================================================
//===================::RECTANGLE::==================
//==================================================
Sakri.Geom.Rectangle = function (x, y, width, height){
this.update(x, y, width, height);
};
Sakri.Geom.Rectangle.prototype.update = function(x, y, width, height){
this.x = isNaN(x) ? 0 : x;
this.y = isNaN(y) ? 0 : y;
this.width = isNaN(width) ? 0 : width;
this.height = isNaN(height) ? 0 : height;
};
Sakri.Geom.Rectangle.prototype.getRight = function(){
return this.x + this.width;
};
Sakri.Geom.Rectangle.prototype.getBottom = function(){
return this.y + this.height;
};
Sakri.Geom.Rectangle.prototype.getCenter = function(){
return new Sakri.Geom.Point(this.getCenterX(), this.getCenterY());
};
Sakri.Geom.Rectangle.prototype.getCenterX = function(){
return this.x + this.width/2;
};
Sakri.Geom.Rectangle.prototype.getCenterY=function(){
return this.y + this.height/2;
};
Sakri.Geom.Rectangle.prototype.containsPoint = function(x, y){
return x >= this.x && y >= this.y && x <= this.getRight() && y <= this.getBottom();
};
Sakri.Geom.Rectangle.prototype.clone = function(){
return new Sakri.Geom.Rectangle(this.x, this.y, this.width, this.height);
};
Sakri.Geom.Rectangle.prototype.toString = function(){
return "Rectangle{x:"+this.x+" , y:"+this.y+" , width:"+this.width+" , height:"+this.height+"}";
};
}(window));
/**
* Created by sakri on 27-1-14.
* has a dependecy on Sakri.Geom
* has a dependecy on Sakri.BitmapUtil
*/
(function (window){
var Sakri = window.Sakri || {};
window.Sakri = window.Sakri || Sakri;
Sakri.CanvasTextUtil = {};
//returns the biggest font size that best fits into given width
Sakri.CanvasTextUtil.getFontSizeForWidth = function(string, fontProps, width, canvas, fillStyle, maxFontSize){
if(!canvas){
var canvas = document.createElement("canvas");
}
if(!fillStyle){
fillStyle = "#000000";
}
if(isNaN(maxFontSize)){
maxFontSize = 500;
}
var context = canvas.getContext('2d');
context.font = fontProps.g
