canvas绘制动态进度条
2018-09-12 本文已影响5人
狂暴机甲
image.png
<body>
<canvas id="mycanvas" width="400" height="400" style="background-color:rgb(214, 214, 214)"></canvas>
<script>
var canvas = document.getElementById('mycanvas');
var width = canvas.width, height = canvas.height;
var ctx = canvas.getContext('2d');
function Drawrect(x, y, w, h) {
this.x = x;
this.y = y;
this.w = 10;
this.wconst = w;
this.h = h;
this.flag = true;
this.run = function () {
if (this.flag) {
this.w++;
if (this.w >= this.wconst) {
this.flag = false;
}
ctx.fillStyle = "#F00";
ctx.fillRect(this.x, this.y, this.w, this.h);
}
if (!this.flag) {
this.w--;
if (this.w <= 1) {
this.flag = true;
}
ctx.clearRect(this.x, this.y, this.wconst, this.h);
ctx.fillStyle = "#F00";
ctx.fillRect(this.x, this.y, this.w, this.h);
}
}
}
var d = new Drawrect(10, 10, 100, 10);
var d2 = new Drawrect(10, 30, 150, 10);
var d3 = new Drawrect(10, 50, 200, 10);
var d4 = new Drawrect(10, 70, 250, 10);
var d5 = new Drawrect(10, 90, 300, 10);
run();
function run() {
//var t = setTimeout(run, 1);
requestAnimationFrame(run);
d.run();
d2.run();
d3.run();
d4.run();
d5.run();
}
</script>
</body>
