let canvasObject = document.createElement("canvas");
let mountPoint = document.getElementById("startrack");
const requestAnimFrame = function (t) {
window.setTimeout(t, 1e3 / 60);
};
mountPoint.width = mountPoint.offsetWidth; // 设置该元素的宽度为它的offsetWidth
mountPoint.height = mountPoint.offsetHeight;
var n = Math.max(mountPoint.width, mountPoint.height);
canvasObject.width = 2.6 * n;
canvasObject.height = 2.6 * n;
var ctx_mount = mountPoint.getContext("2d");
var ctx_canvas = canvasObject.getContext("2d");
var arr = [];
let c = 0;
function random(p1, p2) {
var o = p2 - p1;
return p1 + Math.round(Math.random() * o);
}
function drawImage() {
ctx_mount.drawImage(
canvasObject,
-canvasObject.width / 2,
-canvasObject.height / 2
);
// 将图像canvasObject绘制到canvas ctx_mount上,位置在canvas的中心。
}
function rotate(param) {
ctx_mount.rotate((param * Math.PI) / 180);
// 以ctx_mount为上下文,旋转坐标系统,旋转的角度为 param 乘以π再除以180的弧度值。
}
function w() {
drawImage(),
++c > 150 &&
c % 8 == 0 &&
((ctx_mount.fillStyle = "rgba(0,0,0,.04)"),
ctx_mount.fillRect(-3 * n, -3 * n, 6 * n, 6 * n)), // n为上文定义
rotate(0.025);
}
ctx_mount.fillStyle = "rgba(21,21,21,1)";
ctx_mount.fillRect(0, 0, mountPoint.width, mountPoint.height);
ctx_mount.lineCap = "round";
for (let v = 2e4; v--; ) {
arr.push({
x: random(-ctx_canvas.width, ctx_canvas.width),
y: random(-ctx_canvas.height, ctx_canvas.height),
size: 1.2,
color:
"rgba(" +
random(120, 255) +
"," +
random(120, 255) +
"," +
random(120, 255) +
"," +
random(30, 100) / 100 +
")",
});
}
// 没有用原来的iife,不知道能不能行。
for (var mapValue = arr.length; mapValue--; ) {
var e = arr[mapValue];
ctx_canvas.beginPath();
ctx_canvas.arc(e.x, e.y, e.size, 0, 2 * Math.PI, true);
ctx_canvas.fillStyle = e.color;
ctx_canvas.closePath();
ctx_canvas.fill();
}
ctx_mount.translate(mountPoint.width, 0);
(function t() {
requestAnimFrame(t), w();
})();
window.onresize = function () {
ctx_mount.fillStyle = "rgba(21,21,21,1)";
ctx_mount.fillRect(0, 0, mountPoint.width, mountPoint.height);
};
我尝试把page.js关于canvas的一部分复原出来(我保证是学习/开源目的),但是我运行后只有一块黑色背景,浏览器也没有报错。同样的index.html引入原来的js就可以出现图形。请问大佬能不能指导一下问题在哪里。同时也问一下我可不可以用在一个开源项目中(一定标明出处。)