众所周知，我们所看到的动画实际上就是一系列静态画面快速切换，从而让肉眼因视觉残像产生了「画面在活动」的视觉效果。明白了这一点后，在canvas上绘制动画效果就显得比较简单了。我们只需要将某个静态图形先清除，然后在另外一个位置重新绘制，如此反复，让静态图形按照一定的轨迹进行移动，就可以产生动画效果了。
下面，我们在canvas上绘制一个实心小球，然后用键盘上的方向键控制小球的移动，从而产生动态效果。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5 canvas绘制可移动的小球入门示例</title>
</head>
<body onkeydown="moveBall(event)">
<!-- 添加canvas标签，并加上红色边框以便于在页面上查看 -->
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的浏览器不支持canvas标签。
</canvas>
<script type="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
//表示圆球的类
function Ball(x, y ,radius, speed){
this.x = x || 50; //圆球的x坐标，默认为10
this.y = y || 50; //圆球的y坐标，默认为10
this.radius = radius || 50; //圆球的半径，默认为10
this.speed = speed || 5; //圆球的移动速度，默认为5
//向上移动
this.moveUp = function(){
this.y -= this.speed;
if(this.y < this.radius){
//防止超出上边界
this.y = this.radius;
}
};
//向右移动
this.moveRight = function(){
this.x += this.speed;
var maxX = canvas.width - this.radius;
if(this.x > maxX){
//防止超出右边界
this.x = maxX;
// alert("m")
}
};
//向左移动
this.moveLeft = function(){
this.x -= this.speed;
if(this.x < this.radius){
//防止超出左边界
this.x = this.radius;
}
};
//向下移动
this.moveDown = function(){
this.y += this.speed;
var maxY = canvas.height - this.radius;
if(this.y > maxY){
//防止超出下边界
this.y = maxY;
}
};
}
//绘制小球
function drawBall(ball){
if(typeof ctx != "undefined"){
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);
//创建一个表示放射性颜色渐变的CanvasGradient对象
//该对象的作用域是以(100,100)为圆心、半径为10px的内圆和以(100,100)为圆心、半径为50px的外圆之间的环状区域
var canvasGradient = ctx.createRadialGradient(ball.x,ball.y,0,ball.x,ball.y,50);
//在offset为0的位置(即内圆的圆圈处)添加一个蓝色的渐变
canvasGradient.addColorStop(0,"blue");
//在offset为0.5的位置(环状区域从内到外放射50%的中间位置)添加一个绿色的渐变
canvasGradient.addColorStop(0.5,"green");
//在offset为0的位置(即外圆的圆圈处)添加一个红色的渐变
canvasGradient.addColorStop(1,"red");
//将fillStyle的属性值设为该CanvasGradient对象
ctx.fillStyle = canvasGradient;
ctx.fill();
}
}
//清空canvas画布
function clearCanvas(){
if(typeof ctx != "undefined"){
ctx.clearRect(0, 0, 400, 300);
}
}
var ball = new Ball();
//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){
//获取对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext("2d");
drawBall(ball);
}
//onkeydown事件的回调处理函数
//根据用户的按键来控制小球的移动
function moveBall(event){
switch(event.keyCode){
case 37: //左方向键
ball.moveLeft();
break;
case 38: //上方向键
ball.moveUp();
break;
case 39: //右方向键
ball.moveRight();
break;
case 40: //下方向键
ball.moveDown();
break;
default: //其他按键操作不响应
return;
}
clearCanvas(); //先清空画布
drawBall(ball); //再绘制最新的小球
}
</script>
</body>
</html>
拓展：
①四个方向键的键码分别是37（左）、38（上）、39（右）和40（下）
②switch 语句用于基于不同的条件来执行不同的动作--语法：
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
n 与 case 1 和 case 2 不同时执行的代码
}
工作原理：
①首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
②default 关键词，使用 default 关键词来规定匹配不存在时做的事情
.
相关推荐
网页动画素材 canvas绘制四边形棱镜，酷炫的粒子飞出动画特效。（抖音资料）网页动画素材 canvas绘制四边形棱镜，酷炫的粒子飞出动画特效。（抖音资料）网页动画素材 canvas绘制四边形棱镜，酷炫的粒子飞出动画特效...
可以使用`requestAnimationFrame`函数来创建流畅的动画效果。在这个例子中，我们需要计算小球的位置变化，判断是否与管道发生碰撞，以及调整管道的位置。基本的动画循环可能如下所示： ```javascript function ...
Canvas绘制3D烟花动画特效，js高质量源代码，网页必加点缀！ Canvas绘制3D烟花动画特效，js高质量源代码，网页必加点缀！ Canvas绘制3D烟花动画特效，js高质量源代码，网页必加点缀！ Canvas绘制3D烟花动画特效，js...
网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。（抖音资料）网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。（抖音资料）网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画...
4. **动画原理**：通过在`requestAnimationFrame`中循环绘制，实现动画效果。每次重绘时，改变曲线的位置或形状参数，即可形成动态效果。 ```javascript function animate() { // 更新曲线位置 updateCurve(); ...
JS目录中的文件，如`script.js`，很可能是实现动画效果的核心代码。这个文件中可能会包含以下内容： - 定义动画的帧率和更新逻辑 - 图形的绘制函数，包括初始状态和扭曲后的状态 - 使用`requestAnimationFrame`来...
本文将深入探讨如何利用HTML5 Canvas实现液体波浪动画效果。 首先，我们要了解Canvas的基本用法。Canvas是一个基于矢量图形的元素，通过JavaScript API来操作。在HTML中，我们可以通过`<canvas>`标签创建一个画布，...
部署方面，由于canvas绘制的风场效果是一个Web应用程序，因此需要将其部署到Web服务器上，例如Nginx、Apache或Tomcat。这些服务器软件可以处理HTTP请求并返回HTML、CSS和JavaScript资源，使用户能够在浏览器中访问和...
2.22_用canvas绘制一角弯月｜canvas曲线的绘制（圆弧和贝塞尔曲线）｜Canvas图形、动画、游戏开发从入门到精通全
2. 在`onDraw()`方法中，使用Canvas绘制当前状态的线条。 3. 在构造函数或初始化方法中，创建一个`Handler`对象和`Runnable`实例。 4. 在`Runnable`的`run()`方法中，更新线条的终点坐标，然后调用`invalidate()`...
Canvas也支持定时器，如requestAnimationFrame()，用于创建平滑的动画效果。 然而，Canvas对于3D图形的支持相对较弱，这就是Three.js发挥作用的地方。Three.js是一个强大的JavaScript库，它封装了WebGL的底层细节，...
在这个“html5 canvas绘制3D地球旋转动画特效”中，我们将深入探讨如何利用HTML5 Canvas API来创建一个逼真的3D地球模型，并实现其旋转的动画效果。 首先，我们需要理解Canvas的基本用法。Canvas是一个矩形区域，在...
接下来，实现动画效果的关键在于更新和重绘每一帧。我们可以定义一个函数，该函数会不断地改变沙丁鱼的位置、方向和速度，模拟它们游动的效果。这通常涉及到数学计算，如角度转换、速度向量的更新等。同时，使用`...
这个"canvas绘制玫瑰花动画代码"示例是利用canvas API来创建一个动态的、逼真的玫瑰花绽放效果。接下来，我们将深入探讨如何使用HTML5 canvas绘制玫瑰花动画。 首先，你需要在HTML文件中引入canvas元素。它通常看...
通过在每个帧中更新机器人的一部分，比如改变眼睛的位置或手臂的姿势，可以创建出简单的动画效果。这通常通过使用Handler或Animation类来实现。 在实际项目中，我们可能还需要考虑性能问题。大量的绘制操作会消耗...
Canvas作为Web开发中的一个强大工具，允许我们进行动态图形绘制，非常适合用来展示音频文件的波形。让我们一起了解这个过程。 首先，我们需要获取音频数据。这通常涉及到使用Web Audio API，它为Web应用提供了丰富...
使用Canvas绘制心电图，我们可以创建自定义的可视化，用于教育、模拟或数据展示目的。 Canvas是HTML5的一个核心特性，它提供了一个二维绘图环境，允许开发者通过JavaScript代码动态地绘制图形。要绘制心电图，我们...
HTML5 Canvas是Web开发中的一个强大工具，它允许...无论是简单的背景绘制还是复杂的动画效果，Canvas都是实现这些功能的强大工具。在实际项目中，开发者可以根据需求进一步扩展和优化这些代码，以满足不同的应用场景。
在这个“html5 canvas绘制有趣的情绪表情动画特效”主题中，我们将深入探讨如何利用Canvas API来构建生动、有趣且具有情感表达的动画表情。 首先，Canvas是一个基于矢量图形的元素，通过JavaScript来操纵它的上下文...
以下是对HTML5 Canvas绘制几何图形动画特效的详细讲解。 1. **Canvas API基础** HTML5 Canvas是一个基于矢量图形的画布，通过JavaScript进行编程操作。它提供了`<canvas>`标签，该标签在页面上创建一个矩形区域，...