导语：参考学习平台的资料，自己尝试编写了一个小爱心图形的背景。
window.onload=function(){
document.body.style.margin = "0";
document.body.style.backgroundColor = "#901437"
document.body.appendChild(document.createElement('canvas'));
var canvas = document.querySelector('canvas');//获取canvas元素
var ctx = canvas.getContext('2d');//设置绘制图环境为2d
//将画布设置为窗口文档显示区的大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.position = "fixed";
//定义生成的图形的数量和生成图形放入的数组
var dots = {
nb : 1000,
array:[]
};
//定义生成颜色的函数
function Color(){
this.r = Math.floor(Math.random() * 255);
this.g = Math.floor(Math.random() * 255);
this.b = Math.floor(Math.random() * 255);
this.style = 'rgb(' + this.r + ',' + this.g + ',' + this.b + ',0.8)';
}
function Dot(){
//定义生成图形的坐标
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
//定义生成图形的移动方向和速度
this.vx = -0.5 + Math.random();
this.vy = -0.5 + Math.random();
//可以用这个值改变生成图形的大小
this.radius = Math.random();
//通过函数获取生成图形的颜色
this.color = new Color();
}
//绘制图形
Dot.prototype = {
draw: function(){
ctx.beginPath();
ctx.fillStyle = this.color.style;
ctx.moveTo(this.x+0*this.radius,this.y+1*this.radius);
ctx.lineTo(this.x+0*this.radius,this.y+2*this.radius);
ctx.lineTo(this.x+3*this.radius,this.y+5*this.radius);
ctx.lineTo(this.x+6*this.radius,this.y+2*this.radius);
ctx.lineTo(this.x+6*this.radius,this.y+1*this.radius);
ctx.lineTo(this.x+5*this.radius,this.y+0*this.radius);
ctx.lineTo(this.x+4*this.radius,this.y+0*this.radius);
ctx.lineTo(this.x+3*this.radius,this.y+1*this.radius);
ctx.lineTo(this.x+2*this.radius,this.y+0*this.radius);
ctx.lineTo(this.x+1*this.radius,this.y+0*this.radius);
ctx.fill();
}
};
//将生成的图形写入数组
function creatDots(){
for(i = 0;i < dots.nb;i ++ ){
dots.array.push(new Dot());
}
}
//将生成的图形画在画布上
function drawDot() {
for(i = 0; i < dots.nb;i++){
var dot = dots.array[i];
dot.draw();
}
}
//移动生成的图形并判断生成图形到达边界时往复运动
function moveDots(){
for(i = 0;i < dots.nb;i ++ ){
var dot = dots.array[i];
if(dot.y < 0 || dot.y > canvas.height){
dot.vx = dot.vx;
dot.vy = -dot.vy;
}else if(dot.x < 0 || dot.x > canvas.width){
dot.vx = - dot.vx;
dot.vy = dot.vy;
}
dot.x += dot.vx;
dot.y += dot.vy;
}
}
function start_donghua(){
//清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawDot();
moveDots();
requestAnimationFrame(start_donghua);
}
//调用函数
creatDots();
//使用canvas独有的60Hz刷新屏幕画布的方法
requestAnimationFrame(start_donghua);
}
谢谢大家耐心的看完我的博客！