全宽画布动画
Full width canvas animation
请帮我制作"画布"动画以下是示例:http://codepen.io/anon/pen/jqxVOR?editors=0010
我怎样才能使它全屏显示(最重要的)而不是像素化?
以下代码:
function initPlasma()
{
/* MATH FUNCTIONS ------------------------------ */
function MathUtil() {}
MathUtil.getDistance = function ( a, b ) {
return Math.abs( Math.sqrt(a*a + b*b) );
};
MathUtil.randRangeDecimel = function ( min, max ) {
return Math.random() * ( max - min ) + min;
};
/* GRID CELL CLASS ------------------------------ */
var Cell = function( x, y, w, h ) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
}
Cell.prototype.update = function( r, g, b ) {
this.r = r;
this.g = g;
this.b = b;
this.draw();
};
Cell.prototype.draw = function() {
if( !plasma ) return;
// get color, based on distance
var ctrlPt1 = MathUtil.getDistance( this.x - plasma.controlPoints[0].x, this.y - plasma.controlPoints[0].y );
var ctrlPt2 = MathUtil.getDistance( this.x - plasma.controlPoints[1].x, this.y - plasma.controlPoints[1].y );
var ctrlPt3 = MathUtil.getDistance( this.x - plasma.controlPoints[2].x, this.y - plasma.controlPoints[2].y );
var rVal = .5+.5*Math.sin(this.r) * Math.cos(ctrlPt1/100) * Math.cos(ctrlPt2/100) * Math.sin(ctrlPt3/100);
var gVal = .2+.5*Math.sin(this.g) * Math.sin(ctrlPt1/100) * Math.sin(ctrlPt2/100) * Math.sin(ctrlPt3/100);
var bVal = .2+.5*Math.cos(this.b) * Math.sin(ctrlPt1/100) * Math.cos(ctrlPt2/100) * Math.sin(ctrlPt3/100)
// draw pixel to canvas
plasma.context.fillStyle = "rgb("+ Math.round( 127 + rVal * 255 ) +","+ Math.round( 127 + gVal * 255 ) +","+ Math.round( 127 + bVal * 255 ) +")";
plasma.context.fillRect ( this.x, this.y, this.w, this.h );
};
/* CONTROL POINT CLASS ------------------------------ */
var ControlPoint = function( canvasW, canvasH ) {
// create random x,y starting point
this.incX = MathUtil.randRangeDecimel( 0, 2 * Math.PI );
this.incY = MathUtil.randRangeDecimel( 0, 2 * Math.PI );
// create random x,y oscillating speed
this.incXSpeed = MathUtil.randRangeDecimel( .01, .05 );
this.incYSpeed = MathUtil.randRangeDecimel( .01, .05 );
// store center point to oscillate around
this.centerX = canvasW / 2;
this.centerY = canvasH / 2;
}
ControlPoint.prototype.update = function() {
// increment oscillating based on randomly-calculated speed
this.incX += this.incXSpeed;
this.incY += this.incYSpeed;
// update coordinate
this.x = this.centerX + this.centerX * Math.sin( this.incX );
this.y = this.centerY + this.centerY * Math.sin( this.incY );
};
/* PLASMA CLASS ------------------------------ */
var Plasma = function() {
this.COLS = 50;
this.ROWS = 50;
this.CANVAS_W = 700;
this.CANVAS_H = 700;
this.FPS = 1000/30;
this.NUM_CONTROL_POINTS = 3;
this.startR = MathUtil.randRangeDecimel(0,2*Math.PI);
this.startG = MathUtil.randRangeDecimel(0,2*Math.PI);
this.startB = MathUtil.randRangeDecimel(0,2*Math.PI);
this.startIncR = MathUtil.randRangeDecimel(.001,.05);
this.startIncG = MathUtil.randRangeDecimel(.001,.05);
this.startIncB = MathUtil.randRangeDecimel(.001,.05);
this.incR = MathUtil.randRangeDecimel(.0001,.001);
this.incG = MathUtil.randRangeDecimel(.0001,.001);
this.incB = MathUtil.randRangeDecimel(.0001,.001);
this.canvas;
this.context;
this.grid;
this.buildStage();
this.createGrid();
this.createControlPoints();
this.addSaveFunctionality();
var self = this;
setInterval( function(){ self.update(); }, this.FPS );
};
Plasma.prototype.buildStage = function() {
// create and attach canvas element
this.canvas = document.createElement('canvas');
this.canvas.width = this.CANVAS_W;
this.canvas.height = this.CANVAS_H;
document.body.appendChild( this.canvas );
// store graphical context
this.context = this.canvas.getContext("2d");
};
Plasma.prototype.createGrid = function() {
// calculate "pixel" size
var boxW = this.CANVAS_W / this.COLS;
var boxH = this.CANVAS_H / this.ROWS;
// create 2D array of grid cells
this.grid = new Array( this.COLS );
for( var i = 0; i < this.COLS; i++ ) {
this.grid[ i ] = new Array( this.ROWS )
for( var j = 0; j < this.ROWS; j++ ) {
this.grid[ i ][ j ] = new Cell( i * boxW, j * boxH, boxW, boxH );
}
}
};
Plasma.prototype.createControlPoints = function() {
this.controlPoints = [];
for ( var i = 0; i < this.NUM_CONTROL_POINTS; i++ ) {
this.controlPoints.push( new ControlPoint( this.CANVAS_W, this.CANVAS_H ) );
}
};
Plasma.prototype.addSaveFunctionality = function() {
var self = this;
this.canvas.addEventListener("click", function(e) {
window.open( self.canvas.toDataURL("image/jpeg") );
}, false);
};
Plasma.prototype.update = function() {
// increment the starting colors
this.startR += this.startIncR;
var curR = this.startR;
this.startG += this.startIncG;
var curG = this.startG;
this.startB += this.startIncB;
var curB = this.startB;
// update control points
for ( var i = 0; i < this.NUM_CONTROL_POINTS; i++ ) {
this.controlPoints[i].update();
}
// increment grid cells and draw to canvas
for (var i = 0; i < this.COLS; i++) {
for (var j = 0; j < this.ROWS; j++) {
// send new base color to cells
this.grid[i][j].update( curR, curG, curB );
// increment color as we traverse the grid
curR += this.incR;
curG += this.incG * 3;
curB += this.incB;
}
}
};
// kick off the plasma controller
var plasma = new Plasma();
}
对于全屏,我使用这种风格:
<style>
html, document, body {
width: 100%;
height: 100%;
margin: 0px;
border: 0;
overflow: hidden; /* Disable scrollbars */
display: block; /* No floating content on sides */
}
#c {
position: fixed; left: 0px; top: 0px;
}
</style>
在我使用id为"c"的画布元素的地方:
<canvas id='c'>
我用叉子叉了你的电笔:http://codepen.io/anon/pen/PNebmy
关于像素:我不确定,但像素效应不是伴随着等离子体出现的吗?
相关文章:
- 如何设置html元素填充的动画
- 如何使用动画实现纸张推车
- 如何在生成下载文件时显示加载动画
- 剑道网格jQuery动画()问题
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- jQuery Lazy加载动画滚动
- jquery动画可以通过编程链接吗
- Javascript将数学动画化
- 动画.CSS重播
- 制作一个不带HTML a标记但在动画播放完毕后指向其他页面的超链接
- jQuery,动画和动画返回.回调函数错误?:S
- 如何让 CSS3 动画在动画完成后保持其位置
- 为什么 JavaScript 执行会影响 Firefox 中的 css 动画和动画 gif
- 带有jquery的动画,动画/切换
- JavaScript动画,图像动画只动画一次
- 霓虹动画结束动画事件
- React Native -动画.还原动画时,Spring闪烁
- 关于函数和动画开始/动画结束事件的jQuery问题
- 动画.css动画之间的延迟
- 是什么导致这个简单的动画脚本动画不正确