canvas学习笔记【2021.10.29】
作者：互联网
今天跟着B站up主老板汽水加糖，学习了用canvas线性小球。
split()方法 按值分割字符串为数组的方法，如果有多个值，可以把它看成数组中的逗号。
例子：
let textArry = 'javaScript HTML PHP Canvas CSS ES6 vue React NodeJs'.split(' ');
console.log(textArry);
结果如下：
Array(9) [ "javaScript", "HTML", "PHP", "Canvas", "CSS", "ES6", "vue", "React", "NodeJs" ]
fillStyle继承问题 当你前面设置了fillStyle的时候，使用closepath（）是不会清除fillStyle的，就像用画笔粘了颜色，你清除画布是没用的，因为没有改变画笔粘的颜色。利用这个继承机制，我们可以让小球的颜色和线的颜色一致。
连线问题 这个就是有x个小球，想让每一个小球都连接在一起，那么需要从第一个小球从0开始依次递增。比如5个球，第一个连接0个，第二个连接1个。。。第五个连接4个。
完整代码如下：
!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body{
width: 98vw;
height: 98vh;
}
</style>
</head>
<body>
<canvas id="canvas">
您的浏览器不支持canvas，请升级。
</canvas>
</body>
<script>
/** @type {HTMLCanvasElement} */
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext('2d');
let w = document.documentElement.clientWidth-6;
let h = document.documentElement.clientHeight-6;
canvas.width=w;
canvas.height=h;
//第一步封装三个函数
//画线
function drawLine(x1, y1, x2, y2, color) {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = color || '#000';
ctx.stroke();
ctx.closePath();
}
//画字
function drawText(text, x, y) {
ctx.font = "28px 楷体";
//fillStyle不会因为关闭路径而消失
ctx.textAlign = "start";
ctx.textBaseline = "middle";
ctx.fillText(text, x, y);
}
//画球
function drawBall(x, y, r, color) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2);
ctx.fillStyle = color || '#000';
ctx.fill();
ctx.closePath();
}
//创建小球类
function random(num) {
return parseInt(Math.random() * num);//随机整数
}
function ball(text) {
//随机生成的属性
this.x = random(1096)+52;
this.y = random(696)+52;
this.r = random(40) + 50;
this.color = "#" + parseInt(Math.random() * 0xffffff).toString(16);
this.xSpeed = random(8 - 3) + 3;
this.ySpeed = random(7 - 2) + 2;
//外部传入的参数
this.text=text;
}
//显示小球
ball.prototype.show = function(){
this.run();
drawBall(this.x, this.y, this.r, this.color);
drawText(this.text,this.x+this.r+5,this.y);//字的颜色和球颜色一样，是因为canvas保存了上一个的fillstyle
}
//碰撞检测
ball.prototype.run = function(){
if(this.x-this.r<=0||this.x+this.r>=w){
this.xSpeed=-this.xSpeed;//this少不了
}
this.x=this.x + this.xSpeed;
if(this.y-this.r<=0||this.y+this.r>=h){
this.ySpeed=-this.ySpeed;
}
this.y=this.y+this.ySpeed;
}
//建立放文字的数组
let textArry = 'javaScript HTML PHP Canvas CSS ES6 vue React NodeJs'.split(' ');
console.log(textArry);
//建立小球数组
let ballArry =[];
//创建5个小球并放在数组中
for(var i =0;i<5;i++){
var Ball = new ball(textArry[i]);//记得用new创建新对象;传入text;数组还得放前面
ballArry.push(Ball);
Ball.show();
}
//更新坐标,让小球动起来
let ballTimer = setInterval(function(){
ctx.clearRect(0,0,w,h);
for(var i =0;i<5;i++){
ballArry[i].show();
//两次for循环实现小球连线
//原理：小球连接的个数为自身顺序-1,这可通过j来确定连接的个数
for(var j =0;j<i;j++){
//取出ballArry[i]前面的小球
var frontBall = ballArry[j];
drawLine(ballArry[i].x,ballArry[i].y,frontBall.x,frontBall.y,ballArry[i].color);
}
}
},20)
</script>
</html>标签：function,canvas,2021.10,小球,random,ctx,29,text 来源： https://blog.csdn.net/masierty/article/details/121044187