*{
margin: 0;
padding: 0;
}
canvas{
border: 1px solid red;
width: 100%;
height: 100%;
}
您的浏览器不支持canvas标签。
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var cx1 = canvas.offsetLeft;
var cy1 = canvas.offsetTop;
var cx2 = canvas.offsetLeft + canvas.offsetWidth;
var cy2 = canvas.offsetTop + canvas.offsetHeight;
var bbox = canvas.getBoundingClientRect();
$(function(){
var direction = 'right',x = y = right_count = down_count = left_count = up_count = 0;
ctx.beginPath(); //开始一个新的绘制路径
ctx.moveTo(x, y); //定义直线的起点坐标为(0,0)
setInterval(function(){
ctx.strokeStyle = '#'+Math.floor(Math.random()*16777215).toString(16);
switch(direction){
case 'right':
if(x >= 300 - right_count){
direction = 'down';
right_count++;
}else{
x++;
}
break;
case 'down':
if(y >= 150 - down_count){
direction = 'left';
down_count++;
}else{
y++;
}
break;
case 'left':
if(x <= left_count){
direction = 'up';
left_count++;
}else{
x--;
}
break;
case 'up':
if(y <= up_count + 1){
direction = 'right';
up_count++;
}else{
y--;
}
break;
}
ctx.lineTo(x, y);
ctx.lineCap = 'round';
ctx.lineWidth = 1; //设置线段的宽度
ctx.stroke(); //沿着坐标点顺序的路径绘制直线
}, 1);
})
效果截图:
流需朋者说上事是础一发一开程和开数的目前间水灯时刻跑着,这里主要新直能分支调二浏页器朋代说,事刚是绕圈圈
本文来源于网络:查看 >https://blog.csdn.net/qq_27682041/article/details/79643288