js canvas 实现简单的加载条

来源：互联网发布：mac电脑开不了机编辑：程序博客网时间：2024/06/07 14:09
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>canvas实现加载条动画</title></head><body><canvas id="loadingProgressCanvas"></canvas><script>/*     * 获取canvas, canvas本身没有画图能力，相当于一个画布，提供绘制图形的地方 * document.getElementsByTagName("canvas")[0] * document.querySelector("canvas")/document.querySelector("#loadingProgressCanvas") * document.querySelectorAll("canvas")[0] */var loadingProgressCanvas = document.getElementById("loadingProgressCanvas");var ctx = loadingProgressCanvas.getContext("2d"); // 获取绘制图形的对象(画笔)drawFirst(); // 绘制初始状态var progress = 0; // 定义进度drawProgress(); // 绘制初始进度// 定义定时器, 100ms钟绘制5%var timer = setInterval("drawProgress()", 100);// 绘制初始状态function drawFirst() {ctx.fillStyle="#0000ff"; // 定义画笔颜色, 重新绘制已经加载的进度条/* * 定义矩形(左上角x/y左边,宽高) */ctx.rect(0, 0, 200, 30);ctx.stroke(); // 绘制定义好的矩形路径ctx.fillStyle="#0000ff"; // 定义画笔颜色, 重新绘制已经加载的进度条}// 绘制进度条function drawProgress() {if(progress == 200) {progress = 0;ctx.clearRect(0, 0, 200, 30); // 清楚之前的绘制} else {ctx.moveTo(progress, 0); // 移动到上一次绘制的终点,准备绘制下一次的进度ctx.fillRect(progress, 0, 10, 30); // 200 * 0.05progress += 10; }}</script></body></html>
阅读全文
0 0