0
我有一個簡單的HTML頁面是這樣的：是否可以將畫布設置爲前景？
<html>
<head>
<title></title>
<link rel="icon" type="image/vnd.microsoft.icon" href="images/icon.png" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body bgcolor="ffffff"><br>
<img src="images/1.png" style="position:relative; left:4%; width:85%"></img>
<meta http-equiv="refresh" content="7; home.html" />
</body>
</html>
顯示圖像和7秒後重定向到主頁。我在網上發現了一個使用畫布的酷五彩紙屑代碼，我想將它添加到前景中的這個頁面，但總是能夠看到我將來可以添加到頁面的圖像或文本，但是我找不到一種方式來做到這一點。五彩紙屑代碼是這樣的：
(function() {
var COLORS, Confetti, NUM_CONFETTI, PI_2, canvas, confetti, context, drawCircle, i, range, resizeWindow, xpos;
NUM_CONFETTI = 350;
COLORS = [[85, 71, 106], [174, 61, 99], [219, 56, 83], [244, 92, 68], [248, 182, 70]];
PI_2 = 2 * Math.PI;
canvas = document.getElementById("world");
context = canvas.getContext("2d");
window.w = 0;
window.h = 0;
resizeWindow = function() {
window.w = canvas.width = window.innerWidth;
return window.h = canvas.height = window.innerHeight;
};
window.addEventListener('resize', resizeWindow, false);
window.onload = function() {
return setTimeout(resizeWindow, 0);
};
range = function(a, b) {
return (b - a) * Math.random() + a;
};
drawCircle = function(x, y, r, style) {
context.beginPath();
context.arc(x, y, r, 0, PI_2, false);
context.fillStyle = style;
return context.fill();
};
xpos = 0.5;
document.onmousemove = function(e) {
return xpos = e.pageX/w;
};
window.requestAnimationFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
return window.setTimeout(callback, 1000/60);
};
})();
Confetti = (function() {
function Confetti() {
this.style = COLORS[~~range(0, 5)];
this.rgb = "rgba(" + this.style[0] + "," + this.style[1] + "," + this.style[2];
this.r = ~~range(2, 6);
this.r2 = 2 * this.r;
this.replace();
}
Confetti.prototype.replace = function() {
this.opacity = 0;
this.dop = 0.03 * range(1, 4);
this.x = range(-this.r2, w - this.r2);
this.y = range(-20, h - this.r2);
this.xmax = w - this.r;
this.ymax = h - this.r;
this.vx = range(0, 2) + 8 * xpos - 5;
return this.vy = 0.7 * this.r + range(-1, 1);
};
Confetti.prototype.draw = function() {
var _ref;
this.x += this.vx;
this.y += this.vy;
this.opacity += this.dop;
if (this.opacity > 1) {
this.opacity = 1;
this.dop *= -1;
}
if (this.opacity < 0 || this.y > this.ymax) {
this.replace();
}
if (!((0 < (_ref = this.x) && _ref < this.xmax))) {
this.x = (this.x + this.xmax) % this.xmax;
}
return drawCircle(~~this.x, ~~this.y, this.r, "" + this.rgb + "," + this.opacity + ")");
};
return Confetti;
})();
confetti = (function() {
var _i, _results;
_results = [];
for (i = _i = 1; 1 <= NUM_CONFETTI ? _i <= NUM_CONFETTI : _i >= NUM_CONFETTI; i = 1 <= NUM_CONFETTI ? ++_i : --_i) {
_results.push(new Confetti);
}
return _results;
})();
window.step = function() {
var c, _i, _len, _results;
requestAnimationFrame(step);
context.clearRect(0, 0, w, h);
_results = [];
for (_i = 0, _len = confetti.length; _i < _len; _i++) {
c = confetti[_i];
_results.push(c.draw());
}
return _results;
};
step();
}).call(this);
如何有前景的紙屑動畫，但保持頁面的後臺功能齊全的任何建議或想法？
u能解釋這一點更加明確，它是圖片？或究竟是什麼？ –
是的，對不起。我有一個帶有圖像的簡單頁面，但是將來也許我想添加一些文本或其他內容，這可能是一個將要升級的頁面。我在這個網站上發現了五彩紙屑動畫：http://codepen.io/Shipow/pen/cEgiu，我認爲它會看起來很酷（例如，在一個祝賀頁面或其他東西，它看起來更好與下降五彩紙屑） 。所以我需要的是五彩紙屑效果，因爲它是一切的頂部透明層，但不影響頁面的功能（例如文本，圖像，單選按鈕......） – Hec46
你已經有了答案使指針事件：沒有你可以點擊畫布元素，只需在你的HTML頁面中添加畫布ID，並把指針事件：沒有這一切都完成 –