《HTML5 Canvas游戏开发实战》——2.2 绘制复杂图形-阿里云开发者社区

开发者社区> 华章计算机> 正文

《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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ArcGIS API for Javascript 3.21地图开发实例(一、图形绘制和删除及popup弹出层)
前言 Arcgis是一个地理系统的平台,可用来进行数据数据展示或二次开发。这里我们所使用的是Arcgis对于JavaScript的api,也就是web端的api进行开发。
9591 0
《HTML5游戏编程核心技术与实战》一2.3 图像API
除了绘制常用的图形以外,canvas提供了一系列的API能够对图像进行操作,常见的图像API有以下3个方法。
1218 0
CutJS – 用于 HTML5 游戏开发的 2D 渲染引擎
  CutJS 是轻量级的,快速的,基于 Canvas 开发的 HTML5  2D 渲染引擎,可以用于游戏开发。它是开源的,跨平台的,与现代的浏览器和移动设备兼容。CutJS 提供了一个类似 DOM 树的数据模型来编写应用程序,并在内部管理渲染周期,绘制你的应用程序。
850 0
分享16款基于 HTML5 Canvas 开发的网页游戏
  现在,越来越多的人尝试用 HTML5 来制作网页游戏等丰富的 Web 应用。上次向大家推荐了21款最佳 HTML5 网页游戏,今天要与大家分享的是另外25款基于 HTML5 Canvas 开发的网页游戏,相信体验了这些游戏之后,大家都会觉得 HTML5 很好很强大。
964 0
Asp.net MVC 2 + Castle + NHibernate 项目实战(1)
本文将开始一步一步地使用Asp.net MVC 2 + Castle + NHibernate 开发一个项目。   在开始之前,我先对这三个组件做一个简单的介绍:  Asp.net MVC  它是微软提供的一个基于MVC标准的Web开发模式,其典型特点是有控制器和视图;在这之前,.NET下的Web开发模式大多是采用WebForm,其典型特点是服务端控件和后台触发事件;   NHibernate 它是一个ORM框架,使用Java的SSH做过项目开发的人就非常熟悉了,当前最新版本为NHibernate 3.0,听说完全支持Linq查询语句了,以前只支持HQL语句。
723 0
10059
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载