canvas教程

js canvas 实现简单的加载条

字号+ 作者:H5之家 来源:H5之家 2017-07-22 17:06 我要评论( )

!DOCTYPEhtmlhtmllang=zh-CNheadmetacharset=UTF-8titlecanvas实现加载条动画/title/headbodycanvasid=loadingProgre

<!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.05 progress += 10; } } </script> </body> </html>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5教程:5.8 canvas绘制文字

    HTML5教程:5.8 canvas绘制文字

    2017-07-22 18:03

  • 萌新学android之第二天—容易画板

    萌新学android之第二天—容易画板

    2017-07-22 17:01

  • 印度Micromax的A116 Canvas HD与Canvas Magnus A117可享Lollipop

    印度Micromax的A116 Canvas HD与Canvas Magnus A117可享Lollipop

    2017-07-22 08:01

  • sojson 特效,本站页面“线条”HTML5实现讲解、特效代码下载

    sojson 特效,本站页面“线条”HTML5实现讲解、特效代码下载

    2017-07-22 08:00

网友点评