canvas系列教程07-canvas动画基础1

上面我们玩了一个图表，大家学好结构，然后在那个基础上去扩展各种图表，慢慢就可以形成自己的图表库了。也可以多看看一些国外的图表库简单的版本，分析分析，读代码对提高用处很大。我说了canvas两大主流用途，一个是图表，一个是游戏，在写游戏项目之前，我们先来点基础，关于动画，没有动画基础讲canvas游戏，就跟你妈让你明年五一结婚而不管你现在有没有女朋友一样不符合逻辑（本人深度受害者）。

运动我主要说一点就好了。

用requestAnimationFrame，别用定时器，别用定时器，别用定时器。

一言不合我们先干一梭子代码玩玩。

一梭子.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>document</title>
<style>
    *{
        padding:0;
        margin:0;
    }
    html,body{
        width:100%;
        height:100%;
        overflow: hidden;
    }
    canvas{
        background:#000;
    }
    span{
        font-size: 50px;
    }
</style>
<script>
function rnd(n,m){
    return parseInt(Math.random()*(m-n)+n);
}
function d2a(n){
  return n*Math.PI/180;
}

window.onload=function(){
    var c=document.getElementsByTagName('canvas')[0];
    var W=document.documentElement.clientWidth;
    var H=document.documentElement.clientHeight;
    c.width=W;
    c.height=H;
  function draw(){
    console.log(rnd(0,100));
    //准备画笔
    var gd=c.getContext('2d');
    gd.fillStyle='#fff';
    gd.clearRect(0,0,W,H);
    gd.beginPath();
    gd.arc(rnd(0,W),rnd(0,H),10,d2a(0),d2a(360),false);
    gd.fill();
    window.requestAnimationFrame(draw);//这里用递归不然循环不起来，不用担心性能问题，我说没问题就没问题
  }
  window.requestAnimationFrame(draw);

  //不处理requesAnimationFrame的兼容性就没法在实际项目中使用，因为兼容性太操蛋了
  //使用了一个IIFEs,你不懂也没事 拿过去用就行了
  window.requestAnimationFrame = (function(){
    return  window.requestAnimationFrame       ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            window.msRequestAnimationFrame     ||
            function(callback){
              window.setTimeout(callback, 1000 / 60);//低版本保险刷新频率
            };
  })();
};
</script>
</head>
<body>
<canvas width="800" height="500">
    <span>你的浏览器不支持canvas</span>
</canvas>
</body>
</html>

注意兼容性，注意递归，其它就无视了。上个小球弹跳的例子。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>document</title>
<style>
    *{
        padding:0;
        margin:0;
    }
    html,body{
        width:100%;
        height:100%;
        overflow: hidden;
    }
    canvas{
    }
    span{
        font-size: 50px;
    }
</style>
<script>
function rnd(n,m){
    return parseInt(Math.random()*(m-n)+n);
}
function d2a(n){
  return n*Math.PI/180;
}
window.onload=function(){
    var c=document.getElementsByTagName('canvas')[0];
    var W=document.documentElement.clientWidth;
    var H=document.documentElement.clientHeight;
    c.width=W;
    c.height=H;
  var posX = 0;
  var posY = 0;
  var iSpeedX = 8;
  var iSpeedY = 8;
  function draw(){
    console.log(rnd(0,100));
    //准备画笔
    var gd=c.getContext('2d');
    gd.fillStyle='red';
    gd.clearRect(0,0,W,H);
    gd.beginPath();
    posX+= iSpeedX;
    posY+= iSpeedY;
    if(posX+50>W){//注意arc是从圆心画的所以是50不是100
      iSpeedX*=-1;
    }
    if(posY+50>H){
      iSpeedY*=-1;
    }
    if(posX<50&&iSpeedX!=8){//注意arc是从圆心画的所以是50不是100
      iSpeedX*=-1;
    }
    if(posY<50&&iSpeedY!=8){
      iSpeedY*=-1;
    }
    gd.arc(posX,posY,50,d2a(0),d2a(360),false);
    gd.fill();
    window.requestAnimationFrame(draw);//这里用递归不然循环不起来，不用担心性能问题，我说没问题就没问题
  }
  window.requestAnimationFrame(draw);

  //不处理requesAnimationFrame的兼容性就没法在实际项目中使用，因为兼容性太操蛋了
  //使用了一个IIFEs,你不懂也没事 拿过去用就行了
  window.requestAnimationFrame = (function(){
    return  window.requestAnimationFrame       ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            window.msRequestAnimationFrame     ||
            function(callback){
              window.setTimeout(callback, 1000 / 60);//低版本保险刷新频率
            };
  })();
};
</script>
</head>
<body>
<canvas width="800" height="500">
    <span>你的浏览器不支持canvas</span>
</canvas>
</body>
</html>

不墨迹，收工鸟。下一篇搞一下旋转跳跃，然后写个canvas游戏。

canvas系列教程07-canvas动画基础1

彬哥头发多

引用和评论

vue3公司自用项目实战入门（vue3+router4+antdv+pinia实现）

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合