HTML5游戏开发实战教程（一）canvas使用-职坐标

HTML5游戏开发实战教程（一）canvas使用

沉沙 2018-07-25 来源：阅读 1667 评论 0

摘要：本篇教程探讨了canvas使用教程，希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。

本篇教程探讨了canvas使用教程，希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。

若要开始创作HTML5游戏，只需要一款优秀的文本编辑器来写代码，以及一个兼容HTML5的浏览器即可。以下为基本的HTML5文件结构：

<!DOCTYPE html><html lang="en"><head>

<title>Sample HTML5 File</title>

// 这个函数将在页面完全加载后调用

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>标签中即可，如下所示：

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类型的绘图环境。

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)

使用以上的方法绘制复杂图形需遵循以下步骤：

1. 使用beginPath()方法开始绘制路径

2. 使用moveTo()、lineTo()、arc()方法创建线段

3. 使用closePath()结束绘制并闭合图形

4. 使用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>标签：

绘制图像

// 获取图片对象引用

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状态。

本文由职坐标整理并发布，了解更多内容，请关注职坐标WEB前端HTML5/CSS3频道！

html5页面制作工具 html5游戏开发实战 html5 canvas

本文由 @沉沙发布于职坐标。未经许可，禁止转载。

喜欢 | 0

不喜欢 | 0

看完这篇文章有何感觉？已经有0人表态，0%的人喜欢快给朋友分享吧~

后参与评论

加入IT交流圈

JAVA工程师交流群 +加入

大数据架构师交流群 +加入

人工智能Python交流群 +加入

WEB/H5前端交流群 +加入

WEB前端 直通车

索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈

海同师资推荐更多>>

黄骈联系TA

认证System Analyst，System Architect

程光淼联系TA

精通C、C++等语言、智能芯片开发

热门就业培训班更多>>

【零基础】人工智能+Python全栈开发课程

HTML5/CSS330天热搜词更多>>

html5+css3从入门到精通源码精通html5和css3 html5css3教程下载 html5+css3从入门到精通pdf html5经典实例 html5+css3从入门到精通如何 html5css3从入门到精通视频教程 html5 css3入门 html5 css3入门到精通 html5css3教程 html5教程技巧 html5零基础教程 html5+css3 html5可以做什么 html5+css3从入门到精通下载 html5从入门到精通来自微博html5版是什么 html5教程当当 html5从入门到精通pdf html5个人简历模板