新年快乐ctf_2013年新年快乐
新年快乐ctf
Happy New Year 2013 Today – New Year’s Eve Day. And we would like to congratulate all of our readers to this wonderful event. Thank you for being with us from the beginning, feel free to visit our website and in the New Year where you will find a great variety of new tutorials and articles. Today we have prepared an interesting html5 postcard for Christmas and New Year. This is animated Snowflakes at canvas.
2013年新年快乐今天-除夕日。 在此，我们谨向所有读者表示祝贺。 感谢您从一开始就与我们在一起，请随时访问我们的网站和新年，在那里您会发现各种各样的新教程和文章。 今天，我们为圣诞节和新年准备了一个有趣的html5明信片。 这是画布上的动画雪花。
Welcome to test our demonstration, and download the sources
欢迎测试我们的演示，并下载资源
现场演示
现场演示2
打包下载
步骤1. HTML标记 (Step 1. HTML Markup)
As usual for html5 tutorials – our HTML markup is very easy:
和html5教程一样，我们HTML标记非常简单：
Happy New Year 2013 - HTML5 card | Script Tutorials
Happy New Year 2013 - HTML5 card (Back to original tutorial)
Happy New Year 2013 - HTML5 card | Script Tutorials
Happy New Year 2013 - HTML5 card (Back to original tutorial)
There is only single canvas element. We are going to make full screen canvas with festive background image.
只有一个画布元素。 我们将制作带有节日背景图像的全屏画布。
第2步：JS (Step 2. JS)
Now, we please create an empty file ‘js/script.js’ and put next code inside:
现在，我们请创建一个空文件'js / script.js'并将下一个代码放入其中：
// canvas and context objects
var canvas, ctx;
//Snowflakes object
Snowflakes = (function () {
// sprites information
var sprCnt = 15;
var sprWidth = 80;
var sprHeight = 68;
// arrays of snowflakes and sprites
var snowflakes = [];
var snowflakeSprites = [];
// other inner params
var minScale = 0.2; // min scale for flakes
var maxScale = 1.2; // max scale for flakes
var minVerticalVelocity = 2; // min vertical velocity
var maxVerticalVelocity = 5; // max vertical velocity
var minHorizontalVelocity = -2; // min horizontal velocity
var maxHorizontalVelocity = 3; // max horizontal velocity
var minOpacity = 0.1; // min opacity
var maxOpacity = 0.9; // max opacity
var maxOpacityIncrement = 60; // opacity increment
// every flake swings in the interim between next deltas:
var minHorizontalDelta = 1;
var maxHorizontalDelta = 4;
var speed = 2; // speed
// get random number between x1 and x2
function getRandom(x1, x2) {
return Math.random() * (x2 - x1) + x1
}
// initialize sprites
function initializeSprites() {
var img = new Image();
img.onload = function () {
// fill snowflakeSprites with every sprite of sprite.png
for (var i = 0; i < sprCnt; i++) {
// create new canvas
var sprite = document.createElement('canvas');
sprite.width = sprWidth;
sprite.height = sprHeight;
var context = sprite.getContext('2d');
// and draw every sprite at this canvas
context.drawImage(img, i * sprWidth, 0, sprWidth, sprHeight, 0, 0, sprWidth, sprHeight);
// and fill array
snowflakeSprites.push(sprite);
}
}
img.src = './sprite.png';
};
// initialize snowflakes
function initialize(number) {
// initialize sprites
initializeSprites();
// prepare a necessary amount of snowflakes
for (var i = 0; i < number; i++) {
snowflakes.push(initializeSnowflake());
}
};
// initialize snowflake
function initializeSnowflake() {
// get random scale
var scale = getRandom(minScale, maxScale);
return {
x: Math.random() * ctx.canvas.width, // x and
y: Math.random() * ctx.canvas.height, // y positions
vv: getRandom(minVerticalVelocity, maxVerticalVelocity), // vertical and
hv: getRandom(minHorizontalVelocity, maxHorizontalVelocity), // horizontal velocity
o: getRandom(minOpacity, maxOpacity), // opacity
oi: Math.random() / maxOpacityIncrement, // opacity increment
mhd: getRandom(minHorizontalDelta, maxHorizontalDelta), // maximum horizontal delta
hd: 0, // horizontal delta
hdi: Math.random() / (maxHorizontalVelocity * minHorizontalDelta), // horizontal delta increment
sw: scale * sprWidth, // scaled sprite width
sh: scale * sprHeight, // and height
si: Math.ceil(Math.random() * (sprCnt - 1)) // sprite index
}
};
// move flakes
function moveFlakes() {
for (var i = 0; i < snowflakes.length; i++) {
var osf = snowflakes[i];
// shift X and Y position
osf.x += (osf.hd + osf.hv) * speed;
osf.y += osf.vv * speed;
// swings
osf.hd += osf.hdi;
if (osf.hd < -osf.mhd || osf.hd > osf.mhd) {
osf.hdi = -osf.hdi;
};
// collision with borders
if (osf.y > ctx.canvas.height + sprHeight / 2) {
osf.y = 0
};
if (osf.y < 0) {
osf.y = ctx.canvas.height
};
if (osf.x > ctx.canvas.width + sprWidth / 2) {
osf.x = 0
};
if (osf.x < 0) {
osf.x = ctx.canvas.width
};
// toggle opacity
osf.o += osf.oi;
if (osf.o > maxOpacity || osf.o < minOpacity) {
osf.oi = -osf.oi
};
if (osf.o > maxOpacity)
osf.o = maxOpacity;
if (osf.o < minOpacity)
osf.o = minOpacity;
}
}
// render frame
function renderFrame() {
// move (shift) our flakes
moveFlakes();
// clear content
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// draw each flake
for (var i = 0; i < snowflakes.length; i++) {
var osf = snowflakes[i];
ctx.globalAlpha = osf.o;
ctx.drawImage(snowflakeSprites[osf.si], 0, 0, sprWidth, sprHeight, osf.x, osf.y, osf.sw, osf.sh);
}
}
return {
'initialize': initialize,
'render': renderFrame,
}
})();
// main initialization
function initialization() {
// create canvas and context objects
canvas = document.getElementById('panel');
ctx = canvas.getContext('2d');
// set canvas size - fullscreen
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
// loop main scene
setInterval(Snowflakes.render, 40);
Snowflakes.initialize(100);
}
// window onload event handler
if (window.attachEvent) {
window.attachEvent('onload', initialization);
} else {
if (window.onload) {
var curronload = window.onload;
var newonload = function() {
curronload();
initialization();
};
window.onload = newonload;
} else {
window.onload = initialization;
}
}
// canvas and context objects
var canvas, ctx;
//Snowflakes object
Snowflakes = (function () {
// sprites information
var sprCnt = 15;
var sprWidth = 80;
var sprHeight = 68;
// arrays of snowflakes and sprites
var snowflakes = [];
var snowflakeSprites = [];
// other inner params
var minScale = 0.2; // min scale for flakes
var maxScale = 1.2; // max scale for flakes
var minVerticalVelocity = 2; // min vertical velocity
var maxVerticalVelocity = 5; // max vertical velocity
var minHorizontalVelocity = -2; // min horizontal velocity
var maxHorizontalVelocity = 3; // max horizontal velocity
var minOpacity = 0.1; // min opacity
var maxOpacity = 0.9; // max opacity
var maxOpacityIncrement = 60; // opacity increment
// every flake swings in the interim between next deltas:
var minHorizontalDelta = 1;
var maxHorizontalDelta = 4;
var speed = 2; // speed
// get random number between x1 and x2
function getRandom(x1, x2) {
return Math.random() * (x2 - x1) + x1
}
// initialize sprites
function initializeSprites() {
var img = new Image();
img.onload = function () {
// fill snowflakeSprites with every sprite of sprite.png
for (var i = 0; i < sprCnt; i++) {
// create new canvas
var sprite = document.createElement('canvas');
sprite.width = sprWidth;
sprite.height = sprHeight;
var context = sprite.getContext('2d');
// and draw every sprite at this canvas
context.drawImage(img, i * sprWidth, 0, sprWidth, sprHeight, 0, 0, sprWidth, sprHeight);
// and fill array
snowflakeSprites.push(sprite);
}
}
img.src = './sprite.png';
};
// initialize snowflakes
function initialize(number) {
// initialize sprites
initializeSprites();
// prepare a necessary amount of snowflakes
for (var i = 0; i < number; i++) {
snowflakes.push(initializeSnowflake());
}
};
// initialize snowflake
function initializeSnowflake() {
// get random scale
var scale = getRandom(minScale, maxScale);
return {
x: Math.random() * ctx.canvas.width, // x and
y: Math.random() * ctx.canvas.height, // y positions
vv: getRandom(minVerticalVelocity, maxVerticalVelocity), // vertical and
hv: getRandom(minHorizontalVelocity, maxHorizontalVelocity), // horizontal velocity
o: getRandom(minOpacity, maxOpacity), // opacity
oi: Math.random() / maxOpacityIncrement, // opacity increment
mhd: getRandom(minHorizontalDelta, maxHorizontalDelta), // maximum horizontal delta
hd: 0, // horizontal delta
hdi: Math.random() / (maxHorizontalVelocity * minHorizontalDelta), // horizontal delta increment
sw: scale * sprWidth, // scaled sprite width
sh: scale * sprHeight, // and height
si: Math.ceil(Math.random() * (sprCnt - 1)) // sprite index
}
};
// move flakes
function moveFlakes() {
for (var i = 0; i < snowflakes.length; i++) {
var osf = snowflakes[i];
// shift X and Y position
osf.x += (osf.hd + osf.hv) * speed;
osf.y += osf.vv * speed;
// swings
osf.hd += osf.hdi;
if (osf.hd < -osf.mhd || osf.hd > osf.mhd) {
osf.hdi = -osf.hdi;
};
// collision with borders
if (osf.y > ctx.canvas.height + sprHeight / 2) {
osf.y = 0
};
if (osf.y < 0) {
osf.y = ctx.canvas.height
};
if (osf.x > ctx.canvas.width + sprWidth / 2) {
osf.x = 0
};
if (osf.x < 0) {
osf.x = ctx.canvas.width
};
// toggle opacity
osf.o += osf.oi;
if (osf.o > maxOpacity || osf.o < minOpacity) {
osf.oi = -osf.oi
};
if (osf.o > maxOpacity)
osf.o = maxOpacity;
if (osf.o < minOpacity)
osf.o = minOpacity;
}
}
// render frame
function renderFrame() {
// move (shift) our flakes
moveFlakes();
// clear content
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// draw each flake
for (var i = 0; i < snowflakes.length; i++) {
var osf = snowflakes[i];
ctx.globalAlpha = osf.o;
ctx.drawImage(snowflakeSprites[osf.si], 0, 0, sprWidth, sprHeight, osf.x, osf.y, osf.sw, osf.sh);
}
}
return {
'initialize': initialize,
'render': renderFrame,
}
})();
// main initialization
function initialization() {
// create canvas and context objects
canvas = document.getElementById('panel');
ctx = canvas.getContext('2d');
// set canvas size - fullscreen
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
// loop main scene
setInterval(Snowflakes.render, 40);
Snowflakes.initialize(100);
}
// window onload event handler
if (window.attachEvent) {
window.attachEvent('onload', initialization);
} else {
if (window.onload) {
var curronload = window.onload;
var newonload = function() {
curronload();
initialization();
};
window.onload = newonload;
} else {
window.onload = initialization;
}
}
The main concept is: in the beginning we resize our canvas object (we have to make it fullscreen), then, we initialize our snowflakes (we have to initialize various sprite images and snowflake objects), once we are ready – we can start rendering frames. Render function cleans our canvas and draws every single flake. In addition, we have to move every snowflake (download it) from left to right and back again.
主要概念是：首先，我们调整画布对象的大小(必须使其全屏显示)，然后初始化雪花(我们必须初始化各种sprite图像和雪花对象)，一旦准备好就可以开始渲染了。框架。 渲染功能可以清理画布并绘制每一个薄片。 另外，我们必须从左向右移动每个雪花(下载它)，然后再次移回。
步骤3. CSS (Step 3. CSS)
We used a very simple technique to lock full-screen background image:
我们使用了一种非常简单的技术来锁定全屏背景图片：
body {
overflow:hidden;
background: url("../christmas_tree1.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
overflow:hidden;
background: url("../christmas_tree1.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
现场演示
结论 (Conclusion)
Happy New Year. I hope that you like our articles and experiments. Welcome back.
新年快乐。 希望您喜欢我们的文章和实验。 欢迎回来。
翻译自: https://www.script-tutorials.com/happy-new-year-2013/
新年快乐ctf