使用JavaScript和Canvas开发游戏（二） HTML5教程炫意 HTML5_H5之家

文章目录

draw函数

alpha函数

shear函数

scale函数

rotate函数

3、通过Canvas元素实现高级图像操作

这篇文章将带领大家学习使用JavaScript和Canvas元素操作图像了几种不同的方式，这些方式在Canvas元素出现之前是不可能的事儿。

上一篇文章演示了如何利用Canvas实现一个基本的图像动画。那个例子很简单，同样的效果通过修改IMG或DIV等标准HTML元素的一些属性，照样也可以轻易实现。下面我们就来演示一下画布元素的高级应用，展示一下它的真正威力。

首先，还是准备一个HTML页面。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="en"> <head> <title>JavaScript Platformer 2</title> <script type="text/javascript" src="jsplatformer2.js"></script> <style type="text/css"> body { font-family: Arial,Helvetica,sans-serif;} </style> </head> <body> <p> <a href=""> Game Development with Javascript and the canvas element </a> </p> <canvas id="canvas" width="600" height="400"> <p>Your browser does not support the canvas element.</p> </canvas> <br /> <button onclick="currentFunction=alpha;">Change Alpha</button> <button onclick="currentFunction=shear;">Shear</button> <button onclick="currentFunction=scale;">Scale</button> <button onclick="currentFunction=rotate;">Rotate</button> </body> </html>

与上个一例子的HTML页面相比，唯一的区别就是添加了一些按钮。单击这些按钮，就会设置currentFunction变量（稍后介绍）的值，用以改变在渲染循环中运行的函数。

以下是 jsplatformer2.js 的代码。

// 每秒多少帧 const FPS = 30; const SECONDSBETWEENFRAMES = 1 / FPS; const HALFIMAGEDIMENSION = 75; const HALFCANVASWIDTH = 300; const HALFCANVASHEIGHT = 200; var image = new Image(); image.src = "jsplatformer2-smiley.jpg"; //还是第一个例子中的图像 var canvas = null; var context2D = null; var currentFunction = null; var currentTime = 0; var sineWave = 0; window.onload = init; function init() { canvas = document.getElementById('canvas'); context2D = canvas.getContext('2d'); setInterval(draw, SECONDSBETWEENFRAMES * 1000); currentFunction = scale; } function draw() { currentTime += SECONDSBETWEENFRAMES; sineWave = (Math.sin(currentTime) + 1) / 2; context2D.clearRect(0, 0, canvas.width, canvas.height); context2D.save(); context2D.translate(HALFCANVASWIDTH - HALFIMAGEDIMENSION, HALFCANVASHEIGHT - HALFIMAGEDIMENSION); currentFunction(); context2D.drawImage(image, 0, 0); context2D.restore(); } function alpha() { context2D.globalAlpha = sineWave; } function shear() { context2D.transform(1, 0, (sineWave - 0.5), 1, 0, 0); } function scale() { context2D.translate(HALFIMAGEDIMENSION * (1 - sineWave), HALFIMAGEDIMENSION * (1 - sineWave)); context2D.scale(sineWave, sineWave); } function rotate() { context2D.translate(HALFIMAGEDIMENSION, HALFIMAGEDIMENSION); context2D.rotate(sineWave * Math.PI * 2); context2D.translate(-HALFIMAGEDIMENSION, -HALFIMAGEDIMENSION); }

跟前面一样，这个JavaScript文件先定义了一些全局变量。

FPS：每秒多少帧

SECONDSBETWEENFRAMES：两帧之间间隔的秒数（FPS的倒数）

HALFIMAGEDIMENSION：要绘制图像的宽度/高度的一半，用于把图像定位到画布的中心点

HALFCANVASWIDTH：画布宽度的一半，用于配合HALFIMAGEDIMENSION使用，以便在画布上居中图像

HALFCANVASHEIGHT：画布高度的一半，用于配合HALFIMAGEDIMENSION使用，以便在画布上居中图像

currentFunction：渲染循环（参见上一篇文章）中运行的函数

currentTime：应用已经运行了多少秒

sineWave：0到1之间的一个值，用于控制图像的运动

image：要在画布上绘制的图像

canvas：画布元素的引用

context2D：画布元素的2D上下文的引用

然后，跟前面一样，要设置在window的onload事件发生时立即调用init函数（关于init函数的介绍，请参见上一篇文章）。

draw函数

下面来看一看draw函数：

function draw() { currentTime += SECONDSBETWEENFRAMES; sineWave = (Math.sin(currentTime) + 1) / 2; context2D.clearRect(0, 0, canvas.width, canvas.height); context2D.save(); context2D.translate(HALFCANVASWIDTH - HALFIMAGEDIMENSION, HALFCANVASHEIGHT - HALFIMAGEDIMENSION); currentFunction(); context2D.drawImage(image, 0, 0); context2D.restore(); }

这个例子要演示4种效果：修改alpha值（透明度），以及缩放、旋转和切变图像。为了展示这些效果，需要基于某一范围内的值来应用变化。变量sineWave就用来定义这个范围值的基准。

标准的正弦函数能够在-1到1之间产生非常完美的波形图。首先，我们通过递增currentTime变量来反映动画已经运行了多长时间，然后再利用这个值在正弦曲线上找到一个点。给正弦函数返回的值（从-1到1）先加1再除以2，就可以把它们转换成0到1这个范围内的值。

currentTime += SECONDSBETWEENFRAMES; sineWave = (Math.sin(currentTime) + 1) / 2;

然后，调用clearRect方法清空画布，以便为后面的绘图准备一个干净的版面。

context2D.clearRect(0, 0, canvas.width, canvas.height);

使用JavaScript和Canvas开发游戏（二） HTML5教程 炫意 HTML5

使用JavaScript和Canvas开发游戏（二） HTML5教程炫意 HTML5