《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，一经查实，立即删除！

相关文章

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;直接将影像传输到…
阅读更多...
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 这里选择默认…
阅读更多...
偏好设置

偏好设置

转载于: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;数据中心在网络中所扮演的角色也愈加重要。…
阅读更多...
上位机与基恩士plc以太网通讯_2020湛江AB罗克韦尔PLC主机回收二手或全新

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

2020湛江AB罗克韦尔PLC主机回收二手或全新专业回收基恩士光电传感器回收&#xff0c;基恩士安全光栅回收&#xff0c;基恩士对射开关回收&#xff0c;基恩士工控配件回收&#xff0c;基恩士视觉相机回收&#xff0c;发那科伺服驱动电机回收&#xff0c;发那科控制系统回收&…
阅读更多...
生物信息学概论_大学专业详解系列83——生物信息学（理学学士）

生物信息学概论_大学专业详解系列83——生物信息学（理学学士）

生物信息学(理学学士)毕业生应具备的知识和能力(1)掌握扎实的数学、物理、化学基础理论和基本知识&#xff1b;(2)掌握生物学专业基础知识和信息处理的专门知识&#xff1b;(3)掌握普通生物学、细胞生物学、遗传学、分子生物学、生物数据库管理系统、生物信息学、基因组学、蛋白…
阅读更多...
Butterknife全方位解析

Butterknife全方位解析

概述 Butterknife是供职于Square公司的JakeWharton大神开发的开源库&#xff0c;使用这个库&#xff0c;在AS中搭配Android ButterKnife Zelezny插件&#xff0c;可以大大提高开发的效率&#xff0c;从此摆脱繁琐的findViewById(int id)&#xff0c;也不用自己手动bind(int id)…
阅读更多...
论文笔记 Aggregated Residual Transformations for Deep Neural Networks

论文笔记 Aggregated Residual Transformations for Deep Neural Networks

这篇文章构建了一个基本“Block”&#xff0c;并在此“Block”基础上引入了一个新的维度“cardinality”(字母“C”在图、表中表示这一维度)。深度网络的另外两个维度分别为depth&#xff08;层数&#xff09;、width&#xff08;width指一个层的channel的数目&#xff09;。 首…
阅读更多...
matlab 归一化_机器学习中如何用Fscore进行特征选择（附Matlab代码）

matlab 归一化_机器学习中如何用Fscore进行特征选择（附Matlab代码）

作者&#xff1a;kervin编辑&#xff1a;阿吉 目前&#xff0c;机器学习在脑科学领域的应用可谓广泛而深入&#xff0c;不论你是做EEG/ERP研究&#xff0c;还是做MRI研究&#xff0c;都会看到机器学习的身影。机器学习最简单或者最常用的一个应用方向是分类&#xff0c;…
阅读更多...
IOS安装CocoaPods完整流程

IOS安装CocoaPods完整流程

作为一个底层系统大菜鸟,又搞过几年ios来说,安装一个CocoaPods是一件蛋痛的事~ 说懂又懂,说不懂又不懂. 由于安装过程比較复杂,步骤较多,而网上教程又比較零散,并且有一些是扯蛋的,所以本篇文章主要从头到位依据自身安装经历记录每一条终端指令,至于里面的原理和一些概念性的东…
阅读更多...
linux 修改时区_教你在Centos8中更改时区

linux 修改时区_教你在Centos8中更改时区

对于许多与系统相关的任务和进程&#xff0c;使用正确的时区是必不可少的。例如&#xff0c;cron守护进程使用系统的时区执行cron作业&#xff0c;日志文件中的时间戳基于同一系统的时区。环 境CentOS 8检查现在的时区timedatectl是一个命令行实用程序&#xff0c;允许您查看和…
阅读更多...
vb6在后台将窗体保存到图片_如何将寺库网多个商品图片一键分类保存到一个目录...

vb6在后台将窗体保存到图片_如何将寺库网多个商品图片一键分类保存到一个目录...

寺库网是全球最大的奢侈品网上在线购物平台&#xff0c;那么我们怎样可以从寺库网上一键批量采集到多个宝贝商品图片&#xff0c;并分类保存到电脑呢&#xff1f;今天小编给大家带来一款专业电商图片链接采集软件【载图助手】&#xff0c;它支持平台高达141个&#xff0c;均可支…
阅读更多...
浮动与定位

浮动与定位

2019独角兽企业重金招聘Python工程师标准>>> 一.浮动:float:一个元素浮动时,其他内容会"环绕"该元素. 浮动元素的外边距不会合并浮动的元素不能超出其包含快的内边界浮动元素彼此会避免重叠浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高如果…
阅读更多...
驱动级的自动按键_Aqara全自动智能推拉锁D100，体验全自动开门的便捷

驱动级的自动按键_Aqara全自动智能推拉锁D100，体验全自动开门的便捷

大家好&#xff0c;我是梦想是个猪&#xff0c;今天为大家带来的是一篇智能门锁的使用体验。前言家里的这张门陆陆续续的换了好几把智能门锁了&#xff0c;也体验了好几种不同的开锁方式。最开始开发商给安装的是一把指纹和把手分离的那种款式&#xff0c;开锁的时候需要先输入…
阅读更多...
深度学习综述

深度学习综述

摘要&#xff1a; 深度学习可以完成需要高度抽象特征的人工智能任务&#xff0c;如语音识别、图像识别和检索、自然语言理解等。深层模型是包含多个隐藏层的人工神经网络&#xff0c;多层非线性结构使其具备强大的特征表达能力和对复杂任务建模能力。训练深层模型是长期以来的难…
阅读更多...
mac svn工具_Cornerstone 4 for mac(svn管理工具)

mac svn工具_Cornerstone 4 for mac(svn管理工具)

Cornerstone 4 for mac是全新版本的svn管理工具&#xff0c;使用cornerstone for mac 特别版建立的版本控制更利于使用&#xff0c;而且cornerstone 4 特别版全面支持Subversion的功能&#xff0c;这里准备了最新版本的cornerstone for mac 特别版&#xff0c;无需激活&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023