《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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/455514.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

如何查看Ubuntu版本

如何查看Ubuntu版本

有时候需要查看一下系统安装的Ubuntu的版本&#xff0c;最简单的方式是输入lsb_release -a。whatis lsb_release输出&#xff1a;print distribution-specific information。所以lsb_release这个命令就是用来输出发行版的信息的。 Open the Terminal enter:lsb_release -a It w…
阅读更多...
linux下.a/.so/.la目标库区别

linux下.a/.so/.la目标库区别

在linux平台上编译时&#xff0c;常会遇到目标库的疑问&#xff0c;有静态库也有动态库&#xff0c;单个理解都不太难&#xff0c;但是对复杂的工程而言&#xff0c;一旦混合到一起去&#xff0c;对整个工程的理解和调用&#xff0c;将会造成很大困扰&#xff0c;本文就汇总这几…
阅读更多...
python 二元函数绘制_Python绘制二元函数曲面

python 二元函数绘制_Python绘制二元函数曲面

微实践&#xff1a;绘制二元函数曲面我们将演示如何借助于ufunc的广播运算计算下述二元函数的在一个xy平面上的值并将其绘制成3D曲面。其中&#xff0c;x和y的取值范围均为[-2,2]。为了达到目的&#xff0c;我们需要一个二维的结果数组z&#xff0c;其元素的下标对应参数x,y的取…
阅读更多...
Npgsql使用入门(三)【批量导入数据】

Npgsql使用入门(三)【批量导入数据】

Program.cs代码: class Program{static void Main(string[] args){var test new PgBulkCopyHelper<SingleBuilding>("bld_amap_gzmain");foreach (string pName in test.PropNames){Console.WriteLine("name: {0},\t\ttype: {1}", pName, test.Prop…
阅读更多...
远程网络视频监视技术

远程网络视频监视技术

目前要实现广域网视频监视&#xff0c;主要通过三种方式实现&#xff1a;1.硬盘录像机&#xff1b;2.网络视频服务器&#xff1b;3.网络摄像机。 硬盘录像机是一个以录像为主的设备&#xff0c;有的可以支持IE浏览。网络视频服务器一般前端不录像&#xff0c;直接将影像传输到…
阅读更多...
Deepin下java开发环境部署

Deepin下java开发环境部署

简介 本经验由深度论坛用户(zhang12345shun)分享&#xff0c;原文地址 正文 SUN JDK&#xff08;现已改名Oracle JDK&#xff09; 1.下载Sun版JDK压缩包&#xff08;.tar.gz&#xff09;&#xff0c;选择其中的32/64位Linux版本。 2.将其解压缩&#xff1a; sudo tar -zx…
阅读更多...
判断ic卡类型

判断ic卡类型

传15读卡片数据 判断data8的status是否为0&#xff0c;是则是ic 否则就是磁条卡 根据二磁道数据识别是IC卡还是磁条卡 根据二磁道符号后面第一位识别。规则是 该数字 6 或者 2 则该卡是IC卡&#xff0c;否则是普通磁条卡 转载于:https://www.cnblogs.com/wubenhui/p/6956256.h…
阅读更多...
python常用代码_Python常用算法学习(3)（原理+代码）——最全总结

python常用代码_Python常用算法学习(3)（原理+代码）——最全总结

1&#xff0c;什么是算法的时间和空间复杂度算法(Algorithm)是指用来操作数据&#xff0c;解决程序问题的一组方法&#xff0c;对于同一个问题&#xff0c;使用不同的算法&#xff0c;也许最终得到的结果是一样的&#xff0c;但是在过程中消耗的资源和时间却会有很大的区别。那…
阅读更多...
数据监测驱动下的信息流广告优化

数据监测驱动下的信息流广告优化

信息流广告是什么 “今日头条和百度必有一战”&#xff0c;相信不少的互联网人在过去几个月都听到过类似的断言。定位于信息分发平台的今日头条和主营搜索业务的百度会产生如此大的利益冲突&#xff0c;最核心的点其实就是信息流广告。 信息流广告指的是在用户使用互联网产品或…
阅读更多...
在idea中使用git管理你的项目

在idea中使用git管理你的项目

起步 idea是十分智能的Java集成开发环境 而我们在用idea写项目的时候经常遇到版本控制的问题,而git工具如果你只会在终端中的git命令来进行控制,可能会使得效率低下 今天小编就教大家在idea中使用git来管理你的项目 首先创建一个项目 点击create new projects 这里选择默认…
阅读更多...
react-native热更新插件react-native-code-push

react-native热更新插件react-native-code-push

使用react-native-code-push插件来实现热更新的时候&#xff0c;会遇到一些问题。下面这个问题就让我差点崩溃了。 在测试 Production 和 Staging 是否会去检查各自环境下的bundle文件&#xff0c;我就遇到了混乱的问题。 有时候用 Release 打包出来的app会去检查 Staging 下的…
阅读更多...
《工业控制网络安全技术与实践》一一第3章 工业控制网络安全威胁

《工业控制网络安全技术与实践》一一第3章 工业控制网络安全威胁

第3章 工业控制网络安全威胁 第2章介绍了工业控制系统的相关知识。本章主要介绍工业控制网络的基本知识&#xff0c;并详细介绍工业控制网络的常见安全威胁。之后&#xff0c;分析工业控制系统的脆弱性。
阅读更多...
多媒体视频知识入门贴zt（二）

多媒体视频知识入门贴zt（二）

2.2 音视频基本概念介绍 2.2.1 视频的基本概念 RGB和YUV RGB指的是红绿蓝&#xff0c;应用还是很广泛的&#xff0c;比如显示器显示&#xff0c;BMP文件格式中的像素值等&#xff1b;而YUV主要指亮度和两个色差信号&#xff0c;被称为luminance和chrominance他们的转化关系可以…
阅读更多...
Java笔记01-数组相关

Java笔记01-数组相关

数组相关 数组的创建 数据类型[] 数组名称 new 数据类型[数组的长度]其中数据类型可以为任意类型 数组的访问 • 调用数组的length属性可以获取数组的长度&#xff1a; int len arr.length;• 可以通过下标的方式访问数组中的每一个元素。 需要注意的是&#xff1a;数组…
阅读更多...
偏好设置

偏好设置

转载于:https://www.cnblogs.com/xufengyuan/p/6959424.html
阅读更多...
keyshot环境素材文件_快速学会keyshot基础渲染的步骤

keyshot环境素材文件_快速学会keyshot基础渲染的步骤

KeyShot是基于CPU为三维数据进行渲染和动画操作的独立渲染器。意为“The Key to Amazing Shots”&#xff0c;是一个互动性的光线追踪与全域光渲染程序&#xff0c;无需复杂的设定即可产生相片般真实的 3D 渲染影像。KeyShot超强的渲染能力广泛的应用于工业产品、机械工程、CG行…
阅读更多...
传统数据中心如何实现向云的平滑升级

传统数据中心如何实现向云的平滑升级

1.引言 众所周知&#xff0c;云计算是近年来发展最快的互联网技术&#xff0c;被称为第四次IT革命。据权威机构预测&#xff0c;到2016年&#xff0c;2/3的IT应用服务将建立在云架构上 [1]。作为云计算核心的基础承载设施&#xff0c;数据中心在网络中所扮演的角色也愈加重要。…
阅读更多...
UGUI滚动列表ScrollView使用注意点

UGUI滚动列表ScrollView使用注意点

ScrollView的Viewport不能引用其子节点Grid&#xff0c;不然会导致ScrollView滚到头时还能继续滚动&#xff0c;无法回滚 转载于:https://www.cnblogs.com/lovesharing/p/6963062.html
阅读更多...
Java笔记02-OOP

Java笔记02-OOP

面向对象编程 万物皆对象 面向对象指以属性和行为的观点去分析现实生活中的事物 面向对象编程指先以面向对象的思想进行分析,然后使用面向对象的编程语言进行表达的过程 面向对象编程是软件产业化发展的需求 理解面向对象的思想精髓才行 面想对象的三大特性 封装 继承 …
阅读更多...
上位机与基恩士plc以太网通讯_2020湛江AB罗克韦尔PLC主机回收二手或全新

上位机与基恩士plc以太网通讯_2020湛江AB罗克韦尔PLC主机回收二手或全新

2020湛江AB罗克韦尔PLC主机回收二手或全新专业回收基恩士光电传感器回收&#xff0c;基恩士安全光栅回收&#xff0c;基恩士对射开关回收&#xff0c;基恩士工控配件回收&#xff0c;基恩士视觉相机回收&#xff0c;发那科伺服驱动电机回收&#xff0c;发那科控制系统回收&…
阅读更多...
最新文章

Copyright @ 2022~2023