canvas 动态绘制矩形
2020-07-20 本文已影响0人
Ray_afab
WX20200720-110636@2x.png
<html>
<head lang="en">
<meta charset="UTF-8">
<title>绘制矩形的动态案例</title>
</head>
<body>
<canvas id="canvas" width="1000px" height="600px"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
/*
TODO 编写需求
TODO * 绘制空心矩形(sotrkeRect(x,y,width,height))
TODO * 颜色(strokeStyle)随机
TODO * 大小(width,height)随机
TODO * 0 < width < canvas.width
TODO * 0 < height < canvas.height
TODO * 每 500ms 绘制一次
*/
setInterval(function(){
var r = Math.floor(Math.random()*255);/* 0 ~ 255 */
var g = Math.floor(Math.random()*255);
var b = Math.floor(Math.random()*255);
context.strokeStyle = "rgb("+r+","+g+","+b+")";
var x = Math.random()*canvas.width;/* 0 ~ canvas.width */
var y = Math.random()*canvas.height;/* 0 ~ canvas.height */
var width = Math.random()*(canvas.width-x);/* 0 ~ (canvas.width-x) */
var height = Math.random()*(canvas.height-y);/* 0 ~ (canvas.height-y) */
context.strokeRect(x,y,width,height);
},1000);
</script>
</body>
</html>```
