所以,我在github上找到了一个代码片段,我想使用它,但似乎无法让代码工作。 我一直在尝试搜索至少几个小时,但我无法初始化光线对象中的功能,以便阳光效果出现在我的网站上。
以下是代码:
var rays = new Object({
canvas: false,
context: false,
interval: false,
offset: 0,
init: function(id, colour1, colour2){
this.canvas = document.getElementById(id);
this.context = this.canvas.getContext('2d');
this.canvas.style.background = colour1;
this.context.fillStyle = colour2;
clearInterval(this.interval);
this.interval = setInterval(function(){
rays.offset += 0.005;
rays.draw();
}, 100);
this.draw();
},
getXY: function(x, y, d, a){
return {
x: x + d * Math.cos(a),
y: y + d * Math.sin(a)
};
},
draw: function(){
c = this.canvas;
this.context.clearRect(0, 0, c.width, c.height);
length = Math.max(c.width, c.height);
midx = c.width / 2, midy = c.height / 2;
var d = 12;
for(i = 0;i < d;i++){
angle = (Math.PI * 2 / d) * i + this.offset;
this.context.moveTo(midx, midy);
c1 = this.getXY(midx, midy, length, angle + d / 100);
this.context.lineTo(c1.x, c1.y);
c2 = this.getXY(midx, midy, length, angle - d / 100);
this.context.lineTo(c2.x, c2.y);
this.context.lineTo(midx, midy);
this.context.fill();
};
this.context.beginPath();
this.context.arc(midx, midy, c.width * c.height / 20000,
0, Math.PI * 2, true);
this.context.closePath();
this.context.fill();
}
});
答案 0 :(得分:0)
像这样初始化:
var rays = new Object({
// as above ...
});
// assuming id of your canvas is 'my-canvas'
rays.init('my-cnavas', '#eeefff', '#ececec');