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);

  • 相关阅读:
    IO流
    异常,File,递归,IO流
    Collection接口 map
    使用canvas画出的时钟
    js对象2
    js对象
    js 猜数游戏、斗地主发牌、伪数字
    js函数2
    js函数
    js矩形,数组,杨辉三角
  • 原文地址:https://www.cnblogs.com/wangruifang/p/7509581.html
Copyright © 2011-2022 走看看