HTML5游戏开发（一）canvas使用
若要开始创作HTML5游戏，只需要一款优秀的文本编辑器来写代码，以及一个兼容HTML5的浏览器即可。以下为基本的HTML5文件结构：
<!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>Sample HTML5 File</title>
<script>
// 这个函数将在页面完全加载后调用
function pageLoaded(){
alert("Hello World!");
} </script></head><body onload="pageLoaded();">
</body></html>注意 使用body的onload事件调用函数，可以确保函数运行前，页面就已经呗完全加载了。这在操作canvas或image元素的时候非常重要，浏览器未完全加载页面之前就视图访问这些元素会导致JavaScript错误。
在进行游戏开发前，让我们先复习一下搭建游戏的基本元素：
canvas元素（画布）：用于渲染游戏画面
audio元素（音频）：用于添加音效和背景音乐
image元素（图像）：用于加载游戏图像并在canvas中显示
浏览器中的计时函数和循环函数：用于实现动画
canvas元素
游戏中最重要的元素就是HTML5中新出现的canvas元素。按照HTML5标准说法：“canvas元素为脚本提供了像素级的画布，可以实时渲染图形、游戏画面或其他虚拟图像”。
canvas元素允许我们绘制直线、圆、矩形等基本形状，以及图像和文字，而且它已经为快速绘图做过优化了。各大浏览器都已经开始支持GPU加速的2D canvas渲染，因此，使用canvas绘制出的游戏动画运行速度会很快。
使用canvas元素十分简单，只需把<canvas>标签加入HTML5文件的<body>标签中即可，如下所示：
<canvas width="640" height="480" id="canvas" style="border:1px green solid;"> Your browser does not support HTML2 Canvas. Please shift to another browser. </canvas>
如代码所示，我们创建了一个640像素宽、480像素高的canvas元素。目前，这个canvas还是空的。我们可以使用JavaScript在这个矩形区域中画东西。
注意 不支持canvas的浏览器会直接忽视
<canvas>标签，并将标签内的内容展现出来。
我们用最基本的绘图环境在canvas中绘图，通过调用canvas对象的getContext()方法获取绘图环境。getContext()方法只需一个参数：绘图环境的类型。在游戏中，我们使用2D类型的绘图环境。
<script>
function pageLoaded() { // 获取canvas对象的引用
var canvas = document.getElementById("canvas"); // 获取该canvas的2D绘图环境
var context = canvas.getContext('2d'); // 绘图代码将出现在这里
} </script>注意 所有的浏览器都支持2D绘图环境。
绘图环境对象提供了大量的方法，用来在屏幕上绘制我们游戏中的内容，让我们来逐一了解。
绘制矩形
canvas使用原点（0，0）在左上角的坐标系统，x坐标向右递增，y坐标向下递增，如下图所示：
canvas坐标系统
使用绘图环境的矩形绘制函数来绘制矩形。
fillRect(x,y,width,height)：绘制一个实心的矩形strokeRect(x,y,width,height)：绘制一个空心的矩形clearRect(x,y,width,height)：清除指定的矩形区域，使之完全透明
在canvas中绘制矩形
// 实心矩形 // 在点（200，10）处绘制一个高和宽均为100像素的实心正方形 context.fillRect(200, 10, 100, 100); // 在点（50，70）处绘制一个宽90像素、高30像素的实心矩形 context.fillRect(50, 70, 90, 30); // 空心矩形（矩形边框） // 在点（110， 10）处绘制一个宽和高均为50像素的正方形边框 context.strokeRect(110, 10, 50, 50); // 在点（30， 10）处绘制一个宽和高均为50像素的正方形边框 context.strokeRect(30, 10, 50, 50); // 清除矩形区域 // 清除点（210，20）处宽30像素、高20像素的矩形区域 context.clearRect(210, 20, 30, 20); // 清除点（260，20）处宽30像素、高20像素的矩形区域 context.clearRect(260, 20, 30, 20);
效果如下：
在canvas中绘制矩形
绘制复杂形状或路径
在简单的矩形不能满足需求的情况下，绘图环境提供了如下方法来绘制复杂的形状或路径。
beginPath()：开始绘制一个新路径closePath()：通过绘制一条当前点到路径起点的线段来闭合形状fill()，stroke()：填充绘制或绘制空心形状moveTo(x,y)：将当前点移动到点（x,y)lineTo(x,y)：从当前点绘制一条直线段到点(x,y)arc(x,y,radius,startAngle,endAngle,anticclockwise)：绘制一条指定半径的弧到点(x,y)
使用以上的方法绘制复杂图形需遵循以下步骤：
使用
beginPath()方法开始绘制路径使用
moveTo()、lineTo()、arc()方法创建线段使用
closePath()结束绘制并闭合图形使用
stroke()或fill()绘制路径的外边框或填充形状。使用fill()会自动闭合所有未闭合的路径。
在canvas中绘制复杂形状
// 绘制复杂图形 // 填充三角形 context.beginPath(); context.moveTo(10, 120); // 从点(10, 20)开始 context.lineTo(10, 180); context.lineTo(110, 150); context.fill(); // 闭合形状并且以填充方式绘制出来 // 三角形的外边框 context.beginPath(); context.moveTo(140, 160); // 从点（140，160）开始 context.lineTo(140, 220); context.lineTo(40, 190); context.closePath(); context.stroke(); // 一个更复杂的多边形 context.beginPath(); context.moveTo(160, 160); // 从点(160, 160)开始 context.lineTo(170, 220); context.lineTo(240, 210); context.lineTo(260, 170); context.lineTo(190, 140); context.closePath(); context.stroke(); // 绘制弧 // 绘制半圆弧 context.beginPath(); // 在(100, 300)处逆时针画一个半径为40，角度从0到180°的弧线 context.arc(100,300,40,0,Math.PI,true); context.stroke(); // 画一个实心圆 context.beginPath(); // 在(100, 300)处逆时针画一个半径为30，角度从0到360°的弧线 context.arc(100, 300, 30, 0, 2*Math.PI, true); context.fill(); // 画一个3/4弧 context.beginPath(); // 在(200,300)处顺时针画一个半径为25，角度从0到270°的弧线 context.arc(200,300, 25, 0, 3/2*Math.PI, false); context.stroke();
效果如下：
在canvas中绘制复杂形状
绘制文本
在绘图环境中提供了两种方法在canvas中绘制文本。
strokeText(text,x,y)：在(x,y)处绘制空心的文本fillText(text,x,y)：在（x,y)处绘制实心的文本
在canvas中绘制文本
// 绘制文本
context.fillText('This is some text...', 330,40); // 修改字体
context.font = '10pt Arial';
context.fillText('This is in 10pt Arial...', 330, 60);
// 绘制空心的文本
context.font = '16pt Arial';
context.strokeText('This is in 16pt Arial...', 330, 80);效果如下：
在canvas中绘制文本
自定义画笔样式（颜色和纹理）
到目前为止，我们画出来的东西都是黑色的，这是因为canvas默认的绘图颜色就是黑色的。我们当然有其他选择，可以自定义canvas中的线、面和文本的样式，还可以使用不同的颜色、线型、透明度和填充纹理来绘图。
如果想为形状涂上颜色，需要使用以下两个重要的属性。
fillStyle：设置接下来的所有fill操作的默认颜色
strokeStyle：设置接下来所有stroke操作的默认颜色
绘制具有颜色和透明度的矩形
// 设置填充颜色为红色 context.fillStyle = "red"; // 画一个红色的实心矩形 context.fillRect(310, 160, 100, 50); // 设置边线颜色为绿色 context.strokeStyle = 'green'; // 画一个绿色的空心矩形 context.strokeRect(310, 240, 100, 50); // 使用rgb()设置填充颜色为红色 context.fillStyle = "rgb(255,0,0)"; // 画一个红色的实心矩形 context.fillRect(420, 160, 100, 50); // 设置填充颜色为绿色且alpha值（透明度）为0.6 context.fillStyle = 'rgba(0,255,0,0.6)'; // 画一个半透明的绿色实心矩形 context.fillRect(450, 180, 100, 50);
效果如下：
具有颜色和透明度的矩形
绘制图像
前面介绍的绘图函数已经可以做很多事了，但我们仍然需要探索如何绘制已有的图像。图像的绘制方法可以帮助你绘制游戏背景、游戏角色和爆炸效果等这些使游戏更生动的元素。
使用drawImage()方法绘制图像。绘图环境提供了该方法的三个不同版本。
drawImage(image,x,y)：在canvas中（x,y)处绘制图像drawImage(image,x,y,width,height)：在canvas中（x,y)处绘制图像，并将其缩放到指定的宽度和高度drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y,width,height)：从图片中切割出一个矩形区域（sourceX,sourceY,sourceWidth,sourceHeight)，缩放到指定的宽度和高度，并在canvas中(x,y)处绘制出来
在绘制图像之前，还需要将图片加载到浏览器中。我们在<canvas>标签后添加一个<img>标签：
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="p1_jump.png" id="alien">
绘制图像
// 获取图片对象引用
var image = document.getElementById("alien"); // 在(0,350)处绘制图像
context.drawImage(image,0,350); // 缩小图像至原来的一半大小
context.drawImage(image,0, 400, 33, 47);效果如下：
绘制图像
平移和旋转
绘图环境对象提供了一些方法，用以平移或旋转canvas坐标系。方法如下：
translate(x,y)：将坐标系的原点平移到另一个点(x,y)rotate(angle)：以当前原点为中心顺时针旋转坐标系，旋转角度为angle（弧度制）scale(x,y)：以x和y为因子缩放坐标系
这些方法最常用来绘制旋转后的角色或物体。我们可以这样做。
将canvas原点平移到物体处
以指定的角度旋转canvas
绘制物体
将canvas复原至初始状态
// 以原点旋转30° context.rotate(Math.PI/6); context.drawImage(image,50,0);
效果如下：
旋转图像
注意 可以通过反向旋转和平移恢复canvas状态，还可以在变换前调用save()方法，变换后调用restore()方法来恢复canvas状态。
以上。
作者：Viljw
链接：https://www.jianshu.com/p/e390a6172974
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
