三分钟HTML5画布(Canvas)动画教程 – WEB骇客
三分钟HTML5画布(Canvas)动画教程
通常大部分Web程序员平时的工作只是开发一些常规的网站、信息化办公系统等。在他们的眼里，Web游戏动画开发程序员似乎神奇的多，Web游戏动画明显比普通的Web应用要灵活，更注重交互和视觉冲击，而动画动作、做图配色等方面更是外行。之前我也在一篇《》中向大家展示了Web动画的神奇魅力。
但事实上，也许你想错了。Web动画并不难。你只需要掌握一些非常基本的知识就能开发出非常漂亮的Web动画。以前开发动画应用你可能需要学习很复杂的动画制作框架。自从HTML5画布(Canvas)功能面世后，Web动画就一下子从云端跌落到了地面——任何一个Web程序员都可以轻易的用画布(Canvas)技术+JavaScript来开发出各种动画效果。网上用来方便程序员开发画布(Canvas)游戏动画的JS工具包非常丰富，《》这款练习盲打的游戏就是一个叫做的游戏引擎。而文下面的教程中将使用的是另外一个叫做的Web动画工具包。它们都是开源的。
把鼠标放到上面的小丑脸上，然后移开，看看会发生效果。
这就是一个最简单的动画。简单吗？你能做出来吗？
下面我们就用三分钟时间，用很少的几行代码把这个动画做出来。你只需要了解很少的几个API，然后使用需要的动画参数，就能制作出这个有趣又能响应你的动作的Web动画。
第一步，画五官
这个小丑没有耳朵和眉毛，所以只剩下三官，但它的两个眼睛我们要分别绘制，所以一共是四个部分。下面先看看代码。
绘制左眼的代码
var leftEye = new Kinetic.Line({
points: [0, 200, 50, 190, 100, 200, 50, 210],
tension: 0.5,
closed: true,
stroke: 'white',
strokeWidth: 10
绘制右眼的代码
var rightEye = new Kinetic.Line({
x: sw - 250,
points: [0, 200, 50, 190, 100, 200, 50, 210],
tension: 0.5,
closed: true,
stroke: 'white',
strokeWidth: 10
绘制鼻子的代码
var nose = new Kinetic.Line({
points: [240, 280, sw/2, 300, sw-240,280],
tension: 0.5,
closed: true,
stroke: 'white',
strokeWidth: 10
绘制嘴巴的代码
var mouth = new Kinetic.Line({
points: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],
tension: 0.5,
closed: true,
stroke: 'red',
strokeWidth: 10
你会不会觉得很失望，原来就这么简单几行代码。没错，就是这么简单，相信你对自己能成为一名Web游戏动画程序员开始有信心了! ?
简单讲解一下上面的代码。Kinetic就是我们使用的js工具包。在页面的头部，我们需要这样引用它：
&script type="text/javascript"
src="/js/kinetic-v5.0.1.min.js"&&/script&
其它几个分别是几个关键点，线条弹性，颜色，宽度等。这些都很容易理解。
第二步，让图动起来
这个动画之所以能吸引人，是因为它能响应你的鼠标动作，和用户有互动，这是一个成功的动画最关键的地方。如果你仔细观察，这个小丑五官的变化只是形状的变化，眼睛变大，嘴巴变大，鼻子变大，但特别的是这个变化不是瞬间变化，而是有过渡性的，这里面有一些算法，这就是最让人发愁的地方。幸运的是，这算法技术都非常的成熟，不需要我们来思考，在这些动画引擎库里都把这些技术封装成了非常简单方便的接口。下面我们来看看如何让动起来。
左眼的动画
var leftEyeTween = new Kinetic.Tween({
node: leftEye,
duration: 1,
easing: Kinetic.Easings.ElasticEaseOut,
points: [0, 200, 50, 150, 100, 200, 50, 200]
右眼的动画
var rightEyeTween = new Kinetic.Tween({
node: rightEye,
duration: 1,
easing: Kinetic.Easings.ElasticEaseOut,
points: [0, 200, 50, 150, 100, 200, 50, 200]
鼻子的动画
var noseTween = new Kinetic.Tween({
node: nose,
duration: 1,
easing: Kinetic.Easings.ElasticEaseOut,
points: [220, 280, sw/2, 200, sw-220,280]
嘴巴的动画
var mouthTween = new Kinetic.Tween({
node: mouth,
duration: 1,
easing: Kinetic.Easings.ElasticEaseOut,
points: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]
这些代码非常的简单，而且变量名能自释其意。稍微有点经验的程序员想看懂这些代码应该不难。基本每段代码都是让你提供一些点，指定动画动作的衰退模式和持续时间。
完整的动画代码
&!DOCTYPE HTML&
padding: 0
#container {
background-color:
&div id="container"&&/div&
&script src="/js/lib/kinetic-v5.0.1.min.js"&&/script&
&script defer="defer"&
var sw = 578;
var sh = 400;
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 400
var layer = new Kinetic.Layer({
var leftEye = new Kinetic.Line({
points: [0, 200, 50, 190, 100, 200, 50, 210],
tension: 0.5,
closed: true,
stroke: 'white',
strokeWidth: 10
var rightEye = new Kinetic.Line({
x: sw - 250,
points: [0, 200, 50, 190, 100, 200, 50, 210],
tension: 0.5,
closed: true,
stroke: 'white',
strokeWidth: 10
var nose = new Kinetic.Line({
points: [240, 280, sw/2, 300, sw-240,280],
tension: 0.5,
closed: true,
stroke: 'white',
strokeWidth: 10
var mouth = new Kinetic.Line({
points: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],
tension: 0.5,
closed: true,
stroke: 'red',
strokeWidth: 10
layer.add(leftEye)
.add(rightEye)
.add(nose)
.add(mouth);
stage.add(layer);
var leftEyeTween = new Kinetic.Tween({
node: leftEye,
duration: 1,
easing: Kinetic.Easings.ElasticEaseOut,
points: [0, 200, 50, 150, 100, 200, 50, 200]
var rightEyeTween = new Kinetic.Tween({
node: rightEye,
duration: 1,
easing: Kinetic.Easings.ElasticEaseOut,
points: [0, 200, 50, 150, 100, 200, 50, 200]
var noseTween = new Kinetic.Tween({
node: nose,
duration: 1,
easing: Kinetic.Easings.ElasticEaseOut,
points: [220, 280, sw/2, 200, sw-220,280]
var mouthTween = new Kinetic.Tween({
node: mouth,
duration: 1,
easing: Kinetic.Easings.ElasticEaseOut,
points: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]
stage.getContainer().addEventListener('mouseover', function() {
leftEyeTween.play();
rightEyeTween.play();
noseTween.play();
mouthTween.play();
stage.getContainer().addEventListener('mouseout', function() {
leftEyeTween.reverse();
rightEyeTween.reverse();
noseTween.reverse();
mouthTween.reverse();
我相信你已经在3三分钟内看完并看懂了这个动画的制作过程和原理。当然，这个动画很简单，我们这里只是粗浅的讲解一些HTML5画布(Canvas)动画技术的皮毛。如果想真正的成为Web动画告诉，那你还需要做很多的努力。但如果你只是业余爱好，我相信这已经足够让你骄傲了。
阅读余下内容
相关文章：HTML5 Canvas小游戏
知识点: 1.canvas 2.JavaScript
共发布过7门课程
后邀请好友注册，您和好友将分别获赠3个实验豆！
0% Complete
加载中，精彩就在后面...
截取实验桌面
上传本地图片
购买成功！课程上线时，您将收到邮件提醒
一个实验正在进行，是否停止它，开始新实验？
为了让评估结果更加准确，请注意以下操作：
完成实验后点击「停止实验」按钮
将代码提交到代码库
尽可能详尽的撰写实验报告
尽可能在实验操作的关键步骤截图
尽可能减少无用操作
尽可能高效的利用内存/CPU资源
评估课还在不断完善中，我们真挚希望你能通过我们提供的这个平台，找到更好的发展机会。
该实验默认环境
本课程基于 HTML5 的 canvas 实现了一个小游戏，着重介绍了 HTML5 游戏开发的流程及游戏开发中需要处理的东西。对 Web 游戏开发感兴趣的同学可以通过这个项目实践 HTML5 及 JavaScript 基础知识。
您有 -1 个实验豆，激活本课程需要消耗 0 个实验豆！
激活后可不限次数学习本课。
获取验证码
选择支付方式
下次自动登录
注册表示您已经同意我们的在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
标签：至少1个，最多5个
之前在一文中，介绍过Canvas的各种属性以及方法的说明，并列举了自己写的一些Canvas demo，接下来开始写一个简单的小游戏吧，有多简单，这么说吧，代码不到100行，先上效果图:左侧为我们控制的控制板，右侧为假想的电脑控制的控制板体验小游戏链接:
首先在html页面中添加中添加一个canvas元素，并给出一个id用于在js代码中获取该元素并对其进行操作
&canvas id="canvas"&&/canvas&
然后就是对各种参数，注释中都有给出，我就不多说了，直接看
//获取canvas元素以及2d绘图环境c，以及设置canvas宽高为800x600
var canvas = document.getElementById("canvas"),
c = canvas.getContext("2d"),
W = canvas.width = 800,
H = canvas.height = 600;
var ballX = W / 2, ballY = H / 2, ballR = 10, ballVx = 10, ballVy = 2,
//球的位置、半径以及在X轴及Y轴的速度
panelW = 10, panelH = 100, panel1Y = (H - panelH) / 2, panel2Y = (H - panelH) / 2,
//控制板的宽高以及初始位置
player1Score = 0, player2Score = 0, winnerScore = 3,
//记录玩家的分数以及得了多少分算赢
isEnd = 0;
//判断是否比赛结束的变量，0为未结束，1为已结束
封装工具方法
//绘制长方形(也就是控制板)
function fillRect(x, y, w, h, style) {
c.fillStyle =
c.fillRect(x, y, w, h);
//绘制圆(也就是游戏中的球)
function fillCircle(x, y, r, style) {
c.fillStyle =
c.beginPath();
c.arc(x, y, r, 0, Math.PI * 2);
//绘制文字(得分和显示输赢)
function fillText(txt, x, y, font, style) {
c.fillStyle = style || "white";
c.font = font || "40px DejaVu Sans Mono";
c.textAlign = "center";
c.textBaseline = "middle";
c.fillText(txt, x, y);
我们需要在canvas元素上添加监听事件，一是当结束的也就是isEnd为1的时候，当鼠标点击在canvas上的时候再来一把游戏，重置玩家分数以及重启动画绘制，二是我们需要控制左侧控制板的运动，不过只需要在Y轴运动即可
canvas.addEventListener("click", function () {
if (isEnd) {
player1Score = 0;
player2Score = 0;
isEnd = 0;
animate();
//主要的绘制方法
//获取鼠标在canvas上实际Y轴位置减去控制板的高度也就是控制板实际绘制的初始位置
canvas.addEventListener("mousemove", function (e) {
panel1Y = e.clientY - canvas.getBoundingClientRect().top - panelH / 2;
//球边界判断
if (ballX - ballR - panelW & 0) {
if (ballY & panel1Y && ballY & panel1Y + panelH) {
ballVx = -ballVx;
ballVy = (ballY - (panel1Y + panelH / 2)) * .3;
player2Score++;
ballReset();
if (ballX + ballR + panelW & W) {
if (ballY & panel2Y && ballY & panel2Y + panelH) {
ballVx = -ballVx;
ballVy = (ballY - (panel2Y + panelH / 2)) * .3;
player1Score++;
ballReset();
if (ballY + ballR & 0 || ballY - ballR & H) {
ballVy = -ballVy;
//用于控制右侧控制板的运动
if (panel2Y + panelH / 2 & ballY - 40) {
panel2Y = panel2Y + 5;
} else if (panel2Y + panelH / 2 & ballY + 40) {
panel2Y = panel2Y - 5;
我这里直接在animate方法里使用requestAnimationFrame(animate)，更兼容的方法应该是以下这样，为了偷个懒就没写兼容写法
var RAF = (function () {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function (callback) {
window.setTimeout(callback, 1000 / 60);
RAF(animate);
到此，该小游戏的介绍到此结束，简单吧
1 收藏&&|&&3
你可能感兴趣的文章
145 收藏，4.3k
168 收藏，1.7k
45 收藏，3.5k
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。如何开发一个简单的HTML5 Canvas 小游戏_百度知道
如何开发一个简单的HTML5 Canvas 小游戏
我有更好的答案
可以参看一下这个例子可以快速上手快速上手HTML5 Canvas小游戏开发
为您推荐：
其他类似问题
html5的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)