canvas学习笔记（八）—- 基本动画

Java架构师必看

发布于 2021-08-19 10:48:46

6120

发布于 2021-08-19 10:48:46

文章被收录于专栏：Java架构师必看

1.用window.setInterVal()、window.setTimeOut（）和window.requestAnimationFrame()来定期执行一个指定函数

setInterval（function，delay）

requestAnimationFrame(callback)

2.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

img:规定要使用的图像、画布或视频

sx：开始剪切的x坐标，可选

sy：开始剪切的y坐标，可选

swidth、sheight ：被剪切的高度和宽度

x：在画布上放置图像的x坐标

y：在画布上放置图像的y坐标

width：要使用的图像的宽度，可选（伸展或缩小图像）

height：要使用的图像的高度，可选（伸展或缩小图像）

3.globalCompositeOperation属性设置或返回如何将一个源图像绘制到目标图像上

源图像 = 打算放到画布上的绘图

目标图像 = 已经放到画布上的绘图

值：

1）source-over：默认

source-atop：在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。

source-in：在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像时透明的。

source-out：在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。

destination-over：在源图像上方显示显示目标图像。

destination-atop：在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。

destination-in：在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。

destination-out：在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像时透明的。

lighter：显示源图像+目标图像

copy：显示源图像。忽略目标图像

xor：使用抑或操作对源图像与目标图像进行组合。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>day5-2太阳系</title>
  <style type="text/css">
    canvas{border:1px solid black;}
  </style>
</head>
<body onload="draw()">
  <canvas id="tutorial" width="300" height="300">
  </canvas>
  <script type="text/javascript">
    var sun = new Image();
    var moon = new Image();
    var earth = new Image();
    function init(){
      sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png'
      moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png'
      earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png'
      console.log('init') 
      window.requestAnimationFrame(draw)//刷新
    }
    function draw(){
      console.log('draw')
      var canvas = document.getElementById('tutorial')
      if(canvas.getContext){//判断浏览器是否支持getContext属性
        var ctx = canvas.getContext('2d');
        
        ctx.globalCompositeOperation = 'destination-over';//在源图像上方显示目标图像。
        ctx.clearRect(0,0,300,300);

        ctx.fillStyle = 'rgba(0,0,0,0.4)'
        ctx.strokeStyle = 'rgba(0,153,255,0.4)'
        ctx.save()
        ctx.translate(150,150);

        //地球
        var time = new Date();
        ctx.rotate( ((2*Math.PI)/60) *time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
        ctx.translate(105, 0 )
        ctx.fillRect(0, -12, 50, 24);//阴影
        ctx.drawImage(earth, -12, -12)

        //月亮
        ctx.save();
        ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() )
        ctx.translate(0,28.5);
        ctx.drawImage(moon, -3.5, -3.5)
        ctx.restore();

        ctx.restore();

        //轨道
        ctx.beginPath();
        ctx.arc(150, 150, 105, 0, Math.PI*2, false)
        ctx.stroke();

        //太阳
        ctx.drawImage(sun, 0, 0, 300, 300);

        window.requestAnimationFrame(draw)
      }else{}
    }
    init();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>day5-3动画时钟</title>
  <style type="text/css">
    canvas{border:1px solid black;}
  </style>
</head>
<body onload="window,requestAnimationFrame(draw)">
  <canvas id="tutorial" width="300" height="300">
  </canvas>
  <script type="text/javascript">
    function draw(){
      var now = new Date()
      var canvas = document.getElementById('tutorial')
      if(canvas.getContext){//判断浏览器是否支持getContext属性
        var ctx = canvas.getContext('2d');

        ctx.save()
        ctx.clearRect(0,0,150,150)
        ctx.translate(75,75);
        ctx.scale(0.4,0.4)
        ctx.rotate(-Math.PI/2)
        ctx.strokeStyle = 'black'
        ctx.fillStyle = 'white'
        ctx.lineWidth = 8
        ctx.lineCap = 'round'

        //时针标记
        ctx.save();
        for(var i=0;i<12;i++){
          ctx.beginPath();
          ctx.moveTo(100,0)
          ctx.lineTo(120,0)
          ctx.rotate(Math.PI/6);
          ctx.stroke()
        }
        ctx.restore();

        //分针标记
        ctx.save();
        ctx.lineWidth = 5;
        for(i=0;i<60;i++){
          if(i%5!=0){
            ctx.beginPath();
            ctx.moveTo(117,0);
            ctx.lineTo(120,0);
            ctx.stroke()
          }
          ctx.rotate(Math.PI/30)
        }
        ctx.restore()

        var sec = now.getSeconds()
        var min = now.getMinutes()
        var hr = now.getHours()
        hr = hr>=12?hr-12:hr

        ctx.fillStyle = 'black'
        
        //时针
        ctx.save()
        ctx.rotate( hr*(Math.PI/6)+min*(Math.PI/360)+sec*(Math.PI/21600) )
        ctx.lineWidth = 14
        ctx.beginPath()
        ctx.moveTo(-20, 0)
        ctx.lineTo(80, 0)
        ctx.stroke();
        ctx.restore()

        //分针
        ctx.save()
        ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
        ctx.lineWidth = 10
        ctx.beginPath()
        ctx.moveTo(-28, 0)
        ctx.lineTo(112, 0)
        ctx.stroke()
        ctx.restore()

        //秒针
        ctx.save()
        ctx.rotate(sec*Math.PI/30)
        ctx.strokeStyle = "#D40000"
        ctx.fillStyle = "#D40000"
        ctx.lineWidth = 6
        ctx.beginPath();
        ctx.moveTo(-30, 0)
        ctx.lineTo(83,0)
        ctx.stroke()
        ctx.beginPath()
        ctx.arc(0,0,10,0,Math.PI*2,true)
        ctx.fill()
        ctx.beginPath();
        ctx.arc(95, 0, 10, 0, Math.PI*2,true)
        ctx.stroke();
        ctx.fillStyle="rgba(0,0,0,0)"
        ctx.arc(0,0,3,0,Math.PI*2,true)
        ctx.fill()
        ctx.restore()

        //钟表的外部装饰
        ctx.beginPath();
        ctx.lineWidth = 14;
        ctx.strokeStyle = '#325FA2'
        ctx.arc(0,0,142,0,Math.PI*2,true)
        ctx.stroke()
        ctx.restore()

        window.requestAnimationFrame(draw)
      }else{}
      window,requestAnimationFrame(draw)
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>day5-4看全景图</title>
  <style type="text/css">
    canvas{border:1px solid black;}
  </style>
</head>
<body onload="draw()">
  <canvas id="tutorial" width="1000" height="200">
  </canvas>
  <script type="text/javascript">
        
    var img = new Image();
    img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg'
    var CanvasXSize = 800;
    var CanvasYSize = 200;
    var speed = 30;
    var scale = 1.05;
    var y=-4.5

    var dx = 0.75
    var imgW;
    var imgH;
    var x;
    var clearX;
    var clearY;

    img.onload = function(){
      imgW = img.width*scale;
      imgH = img.height*scale;
      if(imgW>CanvasXSize) {
        x = CanvasXSize - imgW;
      }
      if(imgW > CanvasXSize){
        clearX = imgW;
      }else{
        clearX = CanvasXSize;
      }
      if(imgH > CanvasYSize){
        clearY = imgH;
      }else{
        clearY = CanvasYSize;
      }
      ctx = document.getElementById('tutorial').getContext('2d')
      return setInterval(draw, speed);
    }

    function draw(){
      ctx.clearRect(0, 0, clearX, clearY);
      if(imgW <= CanvasXSize){
        if(x>(CanvasXSize)){x=0}
        if(x>(CanvasXSize-imgW)){ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH)}
      }else{
        if(x>(CanvasXSize)){x=CanvasXSize-imgW}
        if(x>(CanvasXSize-imgW)){ctx.drawImage(img,x-imgW+1,y,imgW,imgH)}
      }
      ctx.drawImage(img,x,y,imgW,imgH)
      x+=dx
    }
  </script>
</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css