zoukankan      html  css  js  c++  java
  • canvas绘制加载特效

    css样式:
    body{
    text-align: center;
    }
    canvas{
    background: #ddd;
    }

    canvas标签:


    <canvas id="canvas" width="500" height="400"></canvas>
    js:
      var elem = document.getElementById("canvas");
      var canvas = elem.getContext("2d");//获取画笔
      //开始路径
      //var a = -90*Math.PI/180;
      canvas.beginPath();
      canvas.lineWidth=10;
      canvas.arc(250,200,100,0*Math.PI/180,360*Math.PI/180);
      canvas.strokeStyle = "#aaa";
      canvas.stroke();
      var b = -90;
      var timer = setInterval(function(){
      canvas.beginPath();
      canvas.arc(250,200,100,-90*Math.PI/180,(b++)*Math.PI/180);
      canvas.strokeStyle = "green";
      canvas.stroke();
      // if(b>=270){
      // clearInterval(timer);
      // timer = null;
      // }
      },10);

  • 相关阅读:
    构建之法 阅读笔记01
    个人作业1 -数组
    进度一
    开课博客
    生活尝试
    人月神话3
    安卓开发工具
    人月神话 2
    Qt 的入门小程序
    提问的智慧 摘抄(How To Ask Questions The Smart Way)
  • 原文地址:https://www.cnblogs.com/wangruifang/p/7509581.html
Copyright © 2011-2022 走看看