《HTML5 Canvas游戏开发实战》——2.2 绘制复杂图形

简介:

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

2.2 绘制复杂图形

前面了解了基本图形的绘制方法,下面我们来看看复杂图形该如何绘制。
2.2.1 画曲线
贝塞尔曲线,又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。在这里我们不研究贝塞尔曲线的原理,主要介绍在Canvas中如何绘制它。
1 . 二次贝塞尔曲线
二次贝塞尔曲线有一个控制点。在Canvas中用quadraticCurveTo(cpx,cpy,x,y)函数来绘制二次贝塞尔曲线,cpx、cpy表示控制点的坐标;x、y表示终点坐标。
它的绘制如代码清单2-11所示。
代码清单 2-11

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,100);
ctx.quadraticCurveTo(20,50,200,20);
ctx.stroke();
</script>

绘制效果如图2-11所示。

image

图2-12所示是它的原理图。

image

2 . 三次贝塞尔曲线
三次贝塞尔曲线与二次贝塞尔曲线的区别在于,三次贝塞尔曲线有两个控制点,如代码清单2-12所示。
代码清单 2-12

<script type="text/javascript">
var c = document.getElementById("myCanvas");  
var ctx = c.getContext("2d");  
ctx.moveTo(68, 130);  
var cX1 = 20;  
var cY1 = 10;  
var cX2 = 268;  
var cY2 = 10;  
var endX = 268;  
var endY = 170;  
ctx.bezierCurveTo(cX1, cY1, cX2,cY2, endX, endY);
ctx.stroke();
</script>

绘制效果如图2-13所示。

image

图2-14所示是它的原理图。

image

2.2.2 利用clip在指定区域绘图
clip函数使用当前路径作为连续绘制操作的剪切区域。我们可以把它看作一扇窗户,无论在画板上绘制了多大的图形,最后看到的图形都只能由clip这扇窗户来决定。
为了更容易理解,我们看代码清单2-13。
代码清单 2-13

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.arc(100,100,40,0,360*Math.PI/180,true);
ctx.clip();
ctx.beginPath();
//设定颜色
ctx.fillStyle="lightblue";
//绘制矩形
ctx.fillRect(0,0,300,150);
</script>

在这里,我们首先用arc画了一个圆,然后加入clip函数,最后又画了一个矩形,最后的效果如图2-15所示。

image

可以看到,虽然我们画了一个矩形,但是最后出现的图形里并没有矩形。这是因为首先绘制的是一个圆,然后clip函数将当前的这个圆作为绘制操作的区域,所以之后画出的图形只能显示在这个区域内。也就是说,即使一间房子再大,可是它的窗户很小,最后我们透过这扇窗户能够看到的空间也就只有窗户这么大。所以代码清单中画出的大矩形只能显示出图2-15所示的效果了。
2.2.3 绘制自定义图形
所谓自定义图形,是指将上面讲到的各种方法结合起来,实现一些特殊的图形。比如代码清单2-14。
代码清单 2-14

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath(); 
ctx.moveTo(100, 150);   
ctx.bezierCurveTo(50, 100, 100, 0, 150, 50);   
ctx.bezierCurveTo(200, 0, 250, 100, 200, 150);  
ctx.bezierCurveTo(250, 200, 200, 300, 150, 250);  
ctx.bezierCurveTo( 100, 300, 50, 200,100, 150);    
ctx.closePath();  
ctx.moveTo(100, 150);
ctx.lineTo(150, 50); 
ctx.lineTo(200, 150); 
ctx.lineTo(150, 250); 
ctx.lineTo(100, 150); 
ctx.lineWidth = 5;   
ctx.strokeStyle = "#ff0000";   
ctx.stroke();
</script>

上面代码绘制的自定义图形如图2-16所示。

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)在“圳品”信息系统网页上绘制显示饼图
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等