《HTML5 Canvas游戏开发实战》——2.1 绘制基本图形

简介:

本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第2章,第2.1节,作者:张路斌著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。

2.1 绘制基本图形

所谓基本图形,就是指线、矩形、圆等最简单的图形,任何复杂的图形都是由这些简单的图形组合而成的。我们首先来了解一下这些简单图形的绘制方法。
2.1.1 画线
你可能是第一次接触Canvas绘图。首先,我们通过绘制一个简单的直线来学习Canvas的功能。其代码如代码清单2-1所示。
代码清单 2-1

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100">
你的浏览器不支持HTML5
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d");
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(150,50);
ctx.stroke();
</script>
</body>
</html>

运行后的效果图如图2-1所示。image

下面来解释一下代码清单2-1中的代码。

<canvas id="myCanvas" width="200" height="100">
你的浏览器不支持HTML5
</canvas>

这是在HTML中嵌入Canvas标签。Canvas标签内部可以添加文字或HTML代码,如果浏览不支持Canvas标签,那么浏览器会自动跳过Canvas标签而运行Canvas内部的HTML代码。

var c=document.getElementById("myCanvas");

以上代码是获取HTML中的Canvas标签。

var ctx=c.getContext("2d");

这里返回一个用来绘制环境类型的环境。它返回的是一个 CanvasRenderingContext2D 对象,该对象实现了一个画布所使用的大多数方法。目前,Canvas只支持二维环境,所以参数只能是“2d”。当然,将来也可能会支持三维。

ctx.lineWidth = 10;

以上代码用来设置线条宽度。

ctx.strokeStyle = "red";

此处设置画笔颜色为红色,这里的颜色值可以是英文字母,也可以直接使用颜色的RGB值,如红色为“#ff0000”,黑色为rgb(0,0,0)等。

ctx.beginPath();

以上代码创建一个新的路径。

ctx.moveTo(10,10);

以上代码将画笔光标位置移动到坐标(10,10)处。

ctx.lineTo(150,50);

以上代码从当前坐标开始移动画笔到坐标(150,50)处,绘制一条直线。

ctx.stroke();

上面代码表示开始绘制定义好的路径。
以上过程其实和我们在纸上画一条线是同样的道理,首先我们要选择一种颜色及线条的粗细,然后用画笔从一个点开始画到另一个点,这样就可以画出一条线了。
在画线的时候,也可以使用lineCap来定义线帽的样式,如在代码清单2-2中,分别使用了lineCap的3种样式。
代码清单 2-2

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth = 10;
ctx.strokeStyle = "red";

ctx.lineCap="butt";
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(150,10);
ctx.stroke();

ctx.lineCap="round";
ctx.beginPath();
ctx.moveTo(10,40);
ctx.lineTo(150,40);
ctx.stroke();

ctx.lineCap="square";
ctx.beginPath();
ctx.moveTo(10,70);
ctx.lineTo(150,70);
ctx.stroke();

运行代码,可以看到3种不同的线帽,如图2-2所示。

image

2.1.2 画矩形
下面来看看如何画一个矩形,其代码如代码清单2-3所示。
代码清单 2-3

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.strokeRect(10,10,70,40);
</script>

运行效果如图2-3所示。

image

在Canvas里,用strokeRect函数来绘制一个矩形,它需要4个参数,分别是:起点坐标x和坐标y、矩形长、矩形宽。
也可以用下面代码来替换strokeRect函数,它可以实现同样的功能。

ctx.rect(10,10,70,40);
ctx.stroke();

如果要绘制一个实心的矩形,可以用fillRect函数,如代码清单2-4所示。
代码清单 2-4

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle = "red";
ctx.beginPath();
ctx.fillRect(10,10,70,40);
</script>

运行效果如图2-4所示。

image

fillRect函数同样需要4个参数,分别是:起点的坐标x和坐标y、矩形长、矩形宽。与strokeRect函数不同的是,画实心图形的时候,用fillStyle来定义图形的颜色。
当然,这里也可用另一种实现方法绘制矩形,代码如下:

ctx.rect(10,10,70,40);
ctx.fill();

2.1.3 画圆
圆其实就是一个360度的圆弧。在Canvas中,可使用arc函数来画一个圆弧。先看代码清单2-5所示代码。
代码清单 2-5

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.arc(100,100,70,0,130*Math.PI/180,true);
ctx.stroke();
</script>

运行效果如图2-5所示。

image

arc函数的6个参数分别是:圆弧中心的坐标x和坐标y、圆弧半径、起始角度、终止角度、是否逆时针。需要解释的是,第4个和第5个参数需要传入的是圆弧的弧度,如要画30度的角,需要将其转化成弧度30*Math.PI/180;第6个参数用来控制圆弧是顺时针旋转还是逆时针旋转。
和画矩形一样,同样可以用fill函数来画一个实心的圆弧,如代码清单2-6所示。
代码清单 2-6

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth = 5;
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(100,100,70,0,130*Math.PI/180,true);
ctx.fill();
</script>

运行效果如图2-6所示。

image

画圆时,只需要让起始角度和终止角度之差为360度即可,具体代码如代码清单2-7所示。
代码清单 2-7

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth = 5;
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(100,100,70,0,360*Math.PI/180,true);
ctx.fill();
</script>

运行效果如图2-7所示。

image

2.1.4 画圆角矩形
Canvas中没有直接画圆角矩形的API,但是我们可以用arcTo函数来完成圆角的绘制,然后结合直线绘制,就可以完成圆角矩形的绘制了。在绘制圆角矩形之前,我们先来绘制一个圆角,如代码清单2-8所示。
代码清单 2-8

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath(); 
ctx.moveTo(20,20);
ctx.lineTo(70,20);
ctx.arcTo(120,30,120,70,50);
ctx.lineTo(120,120);
ctx.stroke(); </script>

运行效果如图2-8所示。

image

在代码清单2-8中,arcTo函数是用来为当前的子路径添加一条圆弧的,它需要5个参数,分别是:点P1的坐标x和坐标y、点P2的坐标x和坐标y、圆弧的半径radius。该圆弧有一个点与当前位置到 P1 的线段相切,还有一个点和从 P1 到 P2 的线段相切。这两个切点就是圆弧的起点和终点,圆弧绘制的方向就是连接这两个点的最短圆弧的方向。
在很多常见的应用中,圆弧开始于当前位置而结束于 P2,但情况并不总是这样。如果当前的位置和圆弧的起点不同,这个方法将会添加一条从当前位置到圆弧起点的直线,而且总是将当前位置设置为圆弧的终点。
有了对arcTo函数的了解,画圆角矩形就简单多了,如代码清单2-9所示。
代码清单 2-9

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath(); 
ctx.moveTo(40,20);
ctx.lineTo(100,20);
ctx.arcTo(120,20,120,40,20);
ctx.lineTo(120,70);
ctx.arcTo(120,90,100,90,20);
ctx.lineTo(40,90);
ctx.arcTo(20,90,20,70,20);
ctx.lineTo(20,40);
ctx.arcTo(20,20,40,20,20);
ctx.stroke();
</script>

运行效果如图2-9所示。

image

2.1.5 擦除Canvas画板
擦除Canvas画板上的内容需要用到clearRect函数,此函数可以擦除一个矩形区域。它需要4个参数:起点的坐标x和坐标y,擦除区域的长和宽。其用法如代码清单2-10所示。
代码清单 2-10

<canvas id="myCanvas" width="200" height="100">
你的浏览器不支持HTML5
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle = "red";
ctx.beginPath();
ctx.fillRect(10,10,200,100);
ctx.clearRect(30,30,50,50);
</script>

上面的代码先绘制了一个红色的实心矩形,然后在红色矩形中间擦除了一个50×50的小矩形,效果如图2-10所示。

image

相关文章
|
1天前
|
移动开发 前端开发 HTML5
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画代码
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画特效代码,很有意思,一团三角形碎片跟随鼠标的移动,不冗长、不笨重,反而有一种很轻盈的感觉,非常不错
41 29
|
19天前
HTML在线扫雷游戏网页源码
HTML在线扫雷游戏网页源码是一款基于HTML+CSS+JavaScript开发的在线扫雷小游戏单页源码,为用户提供了一个无需安装即可在浏览器中直接玩的扫雷游戏。该游戏的源码不仅包含了完整的游戏逻辑,还具备丰富的界面设计和用户交互功能,使得玩家能够轻松上手并享受扫雷带来的乐趣。
56 22
|
1月前
|
Web App开发 移动开发 前端开发
html5 canvas五彩碎纸屑飘落动画特效
h5 canvas飘落纸片动画是一款实现五彩纸屑飘落的背景动画特效,基于canvas绘制的空中飘落的纸屑片动画特效,适用于网页动态背景效果代码。简单使用,欢迎下载!代码适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,是一款不错的的特效插件,希望大家喜欢!
44 5
|
2月前
|
前端开发
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
31 0
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
|
2月前
|
移动开发 前端开发 HTML5
HTML5 Canvas制作的粒子十秒倒计时源码
一段基于HTML5 Canvas制作的粒子爆炸,十秒数字倒计时,全屏倒计时动画效果,给人一种非常大气的视觉感
42 0
HTML5 Canvas制作的粒子十秒倒计时源码
|
2月前
|
前端开发 JavaScript
Canvas三维变化背景动画HTML源码
Canvas三维变化背景动画HTML源码
37 5
|
4月前
|
移动开发 JavaScript 数据管理
HTML5 拖放在游戏中的应用
HTML5的拖放功能在游戏开发中广泛应用,尤其在创建交互式网页游戏时。它支持多种场景,如拖动角色或物品、选择和装备物品、拼图或配对游戏以及自定义界面布局。通过简单的HTML和JavaScript代码,可实现流畅的拖放交互,并提供视觉反馈,增强用户体验。此外,还需考虑设备兼容性和数据管理,确保游戏在不同设备和浏览器上都能良好运行。总之,HTML5拖放功能使网页游戏更生动有趣。
|
4月前
|
XML 移动开发 前端开发
HTML5 SVG和canvas的性能探讨
HTML5 中的 SVG(可缩放矢量图形)和 Canvas(画布)分别用于网页图形绘制。SVG 基于矢量图形,使用 XML 描述,适合静态或少量动态内容(如图标、图表),易于编辑且保持高分辨率;Canvas 则基于位图,通过 JavaScript 绘制,更适合快速更新大量图形的场景(如游戏、动态动画),但在复杂图形计算时可能遇到性能瓶颈。总体而言,SVG 适用于静态和少量动态内容,而 Canvas 更适合高频率更新和性能要求高的场景。
|
4月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas详解及应用
HTML5 Canvas 允许通过 JavaScript 在网页上动态绘制图形、动画等视觉内容。首先在 HTML 中定义 `&lt;canvas&gt;` 元素,并通过 JavaScript 获取画布上下文进行绘制。常见方法包括绘制矩形、路径、圆形和文本,以及处理图像和创建动画效果。适用于游戏开发、数据可视化、图像编辑和动态图形展示等多种应用场景。需要注意性能优化、无状态绘制及自行处理事件等问题。
|
4月前
|
移动开发 前端开发 数据挖掘
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图