日记
20024.3.27
日常打卡,学学前端三件套，java
今天学了一点三件套,其中前部分注释为我所写
<!DOCTYPE html><!--定义文档类型，是个html5文档-->
<html lang="en"><!--开始html文档，并规定文档所用语言用英文-->
<head><!--开始了文档的头部部分（通常包括元数据，链接到样式表和脚本等）-->>
<meta charset="UTF-8"><!--定义了文档的字符编码为utf-8，以便于支持各种语言字符-->
<title>动动球</title>
<style>/*开始了一个内联样式部分，用于定义css样式*/
body{/*定义了一个CSS规则，设置body元素的margin（外边距）为0*/
margin: 0;
}
.bubble{/*定义了一个CSS选择器.bubble，并设置了两个样式属性背景和显示方式*/
background-color: rgb(0, 0, 255);
display: block;
}
</style><!--结束了内联样式部分-->
</head><!--结束了文档的头部部分-->>
<body><!--开始了文档的主体部分，即网页的可见内容区域-->>
<canvas class="bubble"></canvas><!--创建了一个<canvas>元素，并为其分配了一个CSS类bubble，<canvas>元素用于在网页上绘制图形，动画，图像-->>
<script>/*开始了一个script标签，用于嵌入或链接javascript代码*/
/*
1.将canvas宽高设置的和浏览器一样
- 注意，获取浏览器的高度 window.innerWidth/innerHeight
- 赋值，可以直接 canvas.width = w; canvas.height = x; 因为canvas本身有width height属性
2. oop面向对象编程。每个球都是一个对象，其所有的方法，属性写在其原型链上
- Bubble.prototype.init() 初始化函数，初始化需要确定bubble的x,y 位置 r半径等，用随机数生成大小不一的球;
- 初始化init(x,y) 与 init() 的不同，鼠标跟随要求确定的x,y，随机生成要求随机，实现函数重载 overload解决此问题
- Bubble.prototype.draw() 根据init的位置，半径等，画出图形。 注意canvas上 beginPath()的重要性
- Bubble.prototype.move() 利用定时器进行不断调用，通过改变bubble的x,y，重绘来实现动画效果。注意每次擦除桌布
3. 鼠标跟随
- canvas.addEventListener('mousemove',function (e) {}) 函数中，记录e.pageX e.pageY，赋值，绘图
*/
var h = window.innerHeight,/*定义了一个变量h，并将它初始化为当前浏览器窗口的内部高度（不包括工具栏和滚动条）*/
w = window.innerWidth,/*定义了一个变量w，并将它初始化为当前浏览器窗口的内部宽度（不包括工具栏和滚动条）*/
nBubble = [];/*定义了一个数组nBubble，并初始化为一个空数组，可能用于存储泡泡对象的引用*/
var canvas = document.getElementsByClassName('bubble')[0],/*用getElenmentsByClassName方法获取页面上所有类名为bubble的元素，并取第一个元素赋值给变量canvas*/
conT = canvas.getContext('2d');/*从canvas元素中获取2d渲染上下文，并将其赋值给cont。这个上下文对象用于在canvas上绘制图形*/
(function () {
canvas.width = w;
canvas.height = h;
window.onresize = function () {
h = window.innerHeight;
w = window.innerWidth;
canvas.width = w;
canvas.height = h;
}
})();
function Bubble (x,y) {
this.colorData = ["rgb(94,213,209)","rgb(255,110,151)","rgb(199,255,236)","rgb(0,255,128)","rgb(208,233,255)"];
if(arguments.length == 0){
this.init();
}else{
this.init(x,y);
}
this.draw();
this.vX = random(-1,1);
this.vY = random(-1,1);
}
Bubble.prototype = {
init : function (x,y) { //实现 函数的 overload
if(arguments.length == 0){
this.x = random(0,w) ;
this.y = random(0,h);
}else{
this.x = x;
this.y = y;
}
this.r = random(3,8);
this.color = this.colorData[Math.floor(random(0,5))];
},
draw : function () {
conT.beginPath();
conT.fillStyle = this.color;
conT.arc(this.x,this.y,this.r,0,2*Math.PI);
conT.fill();
},
move : function () {
this.x += this.vX;
this.y +=this.vY;
},
conllisionDect : function () {
if(this.x - this.r < 0 || this.x + this.r > w){
this.vX = -this.vX;
};
if(this.y - this.r < 0 || this.y + this.r > h){
this.vY = -this.vY;
}
}
}
creat(200);
window.setInterval(function () {
conT.clearRect(0,0,w,h);
for(var key of nBubble){
key.move();
key.draw();
key.conllisionDect();
}
},1000/60)
canvas.addEventListener('mousemove',function (e) {
var x = e.pageX,
y = e.pageY,
len = nBubble.length;
nBubble[len] = new Bubble(x,y);
console.log(x,y);
})
function random(min,max) {
return Math.random() * (max - min) + min;
}
function creat(num) {
for(var i = 0; i< num; i++){
nBubble[i] = new Bubble();
}
}
</script>
</body>
</html>
