特效描述:html5 canvas绘制 全屏星空背景 动画特效。html5 canvas背景动画,星空动画。连线区域跟随鼠标移动,外加碰壁检测
代码结构
1. 引入JS
2. HTML代码
var myCanvas = document.getElementById('myCanvas');
var ctx = myCanvas.getContext('2d');
var min = 1;
var max = 3;
myCanvas.width = document.documentElement.clientWidth;
myCanvas.height = document.documentElement.clientHeight;
function Ball() {
this.centerX = getRandom(max, myCanvas.width - max);
this.centerY = getRandom(max, myCanvas.height - max);
this.radius = getRandom(1, 3);
this.color = getRandomColor();
var speed1 = getRandom(1, 3);
this.speedX = getRandom(0, 1) ? -speed1 : speed1;
var speed2 = getRandom(1, 3);
this.speedY = getRandom(0, 1) ? -speed2 : speed2;
}
Ball.prototype.move