canvas笔记--关于基础动画

最新推荐文章于 2024-11-08 08:52:41 发布

努力的豌豆芽

最新推荐文章于 2024-11-08 08:52:41 发布

阅读量311

点赞数

文章标签： javascript canvas

本文链接：https://blog.youkuaiyun.com/qq_44758643/article/details/108753280

版权

本文介绍了如何使用Canvas实现基本动画，包括清除画布、保存与恢复状态等步骤。并讲解了通过setInterval与setTimeout方法控制动画定时重绘的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本的动画

动画的基本步骤

canvas的基本动画需要三部

1.清空canvas

除非接下来的绘制会全部填满canvas否则需要清空所有。最简单的是用clearRect方法

2.保存canvas状态

如果你需要改变一些会改变canvas状态的设置（样式，变形之类的）又要在每画一帧之时都是原始状态的话，你需要先保存一下

3.绘制动画图形（animated shapes）

这一步才是重绘动画帧。

4.恢复canvas状态

如果已经保存了canvas的状态，可以先恢复它，然后重绘下一帧

操控动画Controlling an animation

为了实现动画我们需要一些可以定时重绘的方法。两种方法可以实现这样的动画效果，可以通过 setInterval 和 setTimeout 方法来控制在设定的时间点上执行重绘。

'setInterval(function, delay)`

当设定好间隔时间后，function会定期执行。

语法：

var intervalID = scope.setInterval(func, [delay, arg1, arg2, ...]);
var intervalID = scope.setInterval(function[, delay]);
var intervalID = scope.setInterval(code, [delay]);

参量：

func

一个function要执行每delay毫秒。该函数未传递任何参数，并且不会返回任何值。

code

可选语法允许您包含字符串而不是函数，该字符串每delay毫秒进行编译和执行。不建议使用此语法，原因与使用eval()安全风险的原因相同。

delay可选的

计时器应以毫秒（千分之一秒）为单位，在指定功能或代码的执行之间延迟。有关允许的值范围的详细信息

arg1, ..., argN 可选的

计时器到期后，将传递给func指定的函数的其他参数。

返回值

返回的intervalID是一个非零的数字值，它标识通过调用所创建的计时器setInterval()。可以将该值传递给WindowOrWorkerGlobalScope.clearInterval()来取消超时。

例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>setInterval/clearInterval example</title>

  <script>
    var nIntervId;
 
    function changeColor() {
      nIntervId = setInterval(flashText, 1000);
    }
 
    function flashText() {
      var oElem = document.getElementById('my_box');
      oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
      // oElem.style.color == 'red' ? 'blue' : 'red' is a conditional or ternary operator.
    }
 
    function stopTextColor() {
      clearInterval(nIntervId);
    }
  </script>
</head>
 
<body onload="changeColor();">
  <div id="my_box">
    <p>Hello World</p>
  </div>

  <button onclick="stopTextColor();">Stop</button>
</body>
</html>

setTimeout(function, delay)`

在设定好的时间之后执行函数

语法

var timeoutID = scope.setTimeout(function[, delay, arg1, arg2, ...]);
var timeoutID = scope.setTimeout(function[, delay]);
var timeoutID = scope.setTimeout(code[, delay]);