canvas实践1

Posted 2020-08-21

今天帮同学遇到问题，我于是就利用了canvas帮他写了个效果，效果如图

我本来在学习不是很想做，但是昨天感觉自己学的有点累就去帮忙做了，我的思路是每次画一个矩形，然后通过rotate旋转让它自身旋转45度，旋转完再用translate位移到目标点，先定义一个正方形的类，然后实例了很多个正方形，之后用画笔把他们全部画出了，设置完位置和判断出界返回之后就大功告成了\\(^o^)/YES!学了几天了终于有点用了，希望自己以后能更强，加油吧，你离小目标还很远呢。

之后还是和以前一样，贴上代码

var canvas = document.getElementById("canvas");
var cxt=canvas.getContext("2d");
var lines=[];
var rectHeight=20;
var diff=30;
var diffW=1;
function Line(x,y,width,height){
this.x=x;
this.y=y;
this.width=width;
this.height=height;
}
window.onload=function(){
rc=rectHeight;
var lenc=23;
for (var i=0;i<lenc;i++) {
rc+=diff;
var heightX=Math.sqrt(rc*rc+rc*rc);
heightX+=diffW;
lines.push(new Line(canvas.width/2,canvas.height/2-heightX/2,rc,rc));
}
drawRect();
}
function drawRect(){
cxt.clearRect(0,0,canvas.width,canvas.height);
for (var i=0;i<lines.length;i++) {
var line=lines[i];
cxt.save();
cxt.translate(line.x,line.y)
cxt.rotate(Math.PI/180*45);
cxt.strokeStyle="red";
cxt.strokeRect(0,0,line.width,line.height);
cxt.stroke();
cxt.restore();
rectCal(line);
}
function rectCal(line){
var diffX=Math.sqrt(diffW*diffW+diffW*diffW);
line.y-=diffX/2;
line.width+=diffW;
line.height+=diffW;
if(line.width>canvas.width+200){
line.width=rectHeight;
line.height=rectHeight;
var heightX=Math.sqrt(rectHeight*rectHeight+rectHeight*rectHeight);
line.x=canvas.width/2;
line.y=canvas.height/2-heightX/2;
console.log(lines,rectHeight)
}
}
var id= requestAnimationFrame(drawRect);
}