以前在網上看到了別人這個效果,感覺很酷也很難,但當真的去了解怎麼做的時候會發現其實沒那麼難。用到的就是canvas。
先來看一下效果
可能不是很好看啊。
1.先創建一個canvas(大小、樣式自己隨意定義)
<canvas id="canvas" width="300" height="300"></canvas>
2.獲取到當前的canvas,並準備畫圖。
let canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
3.畫圓形
context.arc(x, y, size, startAngle, endAngle); //這裏就不寫順時針逆時針了
下面我們就來看看怎麼做吧。我以對象的方法去創建圓形。
- 圓形構造函數
function Circle(x, y, size, speed) {
this.x = x; //x座標
this.y = y; //y座標
this.size = size; //大小
this.color = getRandomCokor(); //隨機的顏色
this.X = getRandom(speed); //x軸隨機的移動速度
this.Y = getRandom(speed); //y軸隨機的移動速度
circleArr.push(this); //放到一個數組保存起來
}
- 創建圖形
Circle.prototype.createCircle = function () {
context.beginPath();
context.arc(this.x, this.y, this.size, 0, 2*Math.PI);
context.fillStyle = this.color; //填充的顏色
context.fill();
context.stroke();
this && this.move(); //移動函數
}
- 移動
Circle.prototype.move = function () {
this.x += this.X; //x軸位移量
this.y += this.Y; //Y軸位移量
this.r -= 1; //半徑縮小的尺寸(這裏我就直接固定大小了)
if(this.r <= 0){
this.delCircle(); //如果半徑小於0,刪除元素
}
}
- 刪除
Circle.prototype.delCircle = function () {
for (let i = circleArr.length - 1; i >= 0; i--) {
if(circleArr[i] === this){
circleArr.splice(i, 1); //刪除那個元素
}
}
}
- 當鼠標移動的時候創建圓形
canvas.onmousemove = function mousemove(e) {
let circle = new Circle(e.clientX, e.clientY, rValue, speedValue);
context.clearRect(0, 0, canvas.width, canvas.height); //每次清理乾淨畫布
circleArr.forEach( function(element, index) {
element.createCircle(); //創建每一個元素
});
}
- 獲得隨機顏色函數
function getRandomCokor() {
let colorR = getRandom(255),
colorG = getRandom(255),
colorB = getRandom(255),
rgb = `rgb(${colorR}, ${colorG}, ${colorB})`;
return rgb;
}
function getRandom(num) {
return Math.floor( Math.random(0, 1) * (num) + 1);
}
- 當鼠標離開或點擊的時候清空畫布和當前數組
canvas.onmouseleave = canvas.onmousedown = function mouseDown() {
circleArr.length = 0;
context.clearRect(0, 0, canvas.width, canvas.height);
}
- 下面我們再來拓展一下功能
先看下效果:
就是能自定義球的大小和位移大小。
- HTML結構
<div class="app">
<canvas id="canvas" width="300" height="300"></canvas>
<h3>當前半徑:</h3>
<input type="text" id="rText">
<input type="range" min="1" max="20" id="rRange">
<h3>當前速度:</h3>
<input type="text" id="speedText">
<input type="range" min="1" max="20" id="speedRange">
</div>
- 獲取各個大小並賦值
let rRange = document.getElementById('rRange'), //大小
rText = document.getElementById('rText'), //大小顯示框
speedRange = document.getElementById('speedRange'), //速度
speedText = document.getElementById('speedText'), //速度大小顯示框
rValue = +rRange.value, //大小
speedValue = +speedRange.value; //速度
rText.value = rValue; //賦值顯示
speedText.value = speedValue; //賦值顯示
- 當改變的時候重新賦值
rRange.onchange = function valueChange(e) { //大小
rValue = + this.value;
rText.value = rValue;
}
speedRange.onchange = function valueChange(e) { //速度
speedValue = + this.value;
speedText.value = speedValue;
}
+整體代碼
let canvas = document.getElementById('canvas'), //獲取canvas
rRange = document.getElementById('rRange'), //大小
rText = document.getElementById('rText'),
speedRange = document.getElementById('speedRange'), //速度
speedText = document.getElementById('speedText'),
context = canvas.getContext('2d'),
circleArr = [],
rValue = +rRange.value,
speedValue = +speedRange.value;
rText.value = rValue; //賦值顯示
speedText.value = speedValue;
function Circle(x, y, size, speed) { //構造函數
this.x = x;
this.y = y;
this.size = size;
this.color = getRandomCokor();
this.X = getRandom(speed);
this.Y = getRandom(speed);
circleArr.push(this);
}
Circle.prototype.createCircle = function () { //創建圖形
context.beginPath();
context.arc(this.x, this.y, this.size, 0, 2*Math.PI);
context.fillStyle = this.color;
context.fill();
context.stroke();
this && this.move();
}
Circle.prototype.move = function () { //移動
this.x += this.X;
this.y += this.Y;
this.r -= 1;
if(this.r <= 0){
this.delCircle();
}
}
Circle.prototype.delCircle = function () { //刪除
for (let i = circleArr.length - 1; i >= 0; i--) {
if(circleArr[i] === this){
circleArr.splice(i, 1);
}
}
}
rRange.onchange = function valueChange(e) { //大小改變的時候重新賦值
rValue = + this.value;
rText.value = rValue;
}
speedRange.onchange = function valueChange(e) { //速度改變的時候重新賦值
speedValue = + this.value;
speedText.value = speedValue;
}
canvas.onmousemove = function mousemove(e) { //鼠標在canvas上移動
let circle = new Circle(e.clientX, e.clientY, rValue, speedValue);
context.clearRect(0, 0, canvas.width, canvas.height);
circleArr.forEach( function(element, index) {
element.createCircle();
});
}
canvas.onmouseleave = canvas.onmousedown = function mouseDown() {
circleArr.length = 0;
context.clearRect(0, 0, canvas.width, canvas.height);
}
function getRandomCokor() { //產生隨機顏色
let colorR = getRandom(255),
colorG = getRandom(255),
colorB = getRandom(255),
rgb = `rgb(${colorR}, ${colorG}, ${colorB})`;
return rgb;
}
function getRandom(num) {
return Math.floor( Math.random(0, 1) * (num) + 1);
}
我只在canvas大小區域內繪製圖形,你可以修改在整個document上繪製圖形。