利用HTML5中的Canvas绘制一张笑脸的教程


Posted in HTML / CSS onMay 07, 2015

利用HTML5中的Canvas绘制一张笑脸的教程今天,你将学习一项称为Canvas(画布)的web技术,以及它和文档对象模型(通常被称为DOM)的关联。这项技术非常强大,因为它使web开发人员能够通过使用JavaScript访问和修改HTML元素。

现在你可能想知道为什么我们需要大刀阔斧地使用JavaScript。简而言之,HTML和JavaScript是相互依存的,一些HTML组件,如canvas元素,并不能脱离JavaScript单独使用。毕竟,如果我们不能在上面绘图,那canvas能派什么用处呢?

为了更好地理解这个概念,我们一起通过一个示例项目来尝试画一个简单的笑脸。让我们开始吧。
开始

首先创建一个新目录来保存你的项目文件,然后打开你最喜欢的文本编辑器或web开发工具。一旦你这样做了,你应该创建一个空的index.html和一个空的script.js,之后我们将继续编辑。

利用HTML5中的Canvas绘制一张笑脸的教程
接下来,我们来修改index.html文件,这不会涉及很多东西,因为我们项目的大部分代码将用JavaScript编写。我们需要在HTML中做的是创建一个canvas元素和引用script.js,这相当直截了当:
 

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html><body>  
  2.     
  3.    <canvas id='canvas' width='640' height='480'></canvas>  
  4.    <script type='text/javascript' src='script.js'></script>  
  5.     
  6. </body></html>  
  7.   

这么解释,我使用一组标记< html >和< body>,这样,我们可以通过body为文档添加更多的元素。抓住这个机会,我完成了一个id属性为canvas的640*480的canvas元素。

这个属性只是简单地为元素加上一个字符串,目的是为了唯一识别,稍后我们将利用这个属性,在JavaScript文件中定位我们的canvas元素。接下来,我们再使用<script>标记引用JavaScript文件,它指定JavaScript的语言类型和script.js文件的路径。
操作DOM

如其名称“文档对象模型”,我们需要通过使用另一种语言,调用接口访问HTML文档,在这里,我们使用的语言是JavaScript。为此,我们需要在内置文档对象上的布置一个简单引用。这个对象直接对应于我们的< html >标记,类似的,它是整个项目的基础,因为我们可以通过它来获取元素,执行变化。
 

XML/HTML Code复制内容到剪贴板
  1. var canvas = document.getElementById('canvas');   
  2.   

还记得我们如何使用id =“canvas”来定义一个canvas元素吗?现在我们使用document.getElementById方法,从HTML文档获取这个元素,我们简单地传递匹配所需元素id的字符串。现在我们已经获取了这个元素,接下来就可以用其进行绘画工作了。

为了使用canvas进行绘画,我们必须操作它的上下文。令人惊讶的是,一个canvas不包含任何绘图的方法或属性,但是它的上下文对象有我们需要的所有方法。一个上下文定义如下所示:

XML/HTML Code复制内容到剪贴板
  1. var context = canvas.getContext('2d');   
  2.   

每一个canvas有几个不同的上下文,根据程序的目的,只需要一个二维的上下文就足够了,它将获得我们需要创建笑脸的所有绘图方法。

在我们开始之前,我必须告知您,上下文存储了两种颜色属性,一个用于画笔(stroke),一个用于填充(fill)。对于我们的笑脸,需要设置填充为黄色,画笔为黑色。
 

XML/HTML Code复制内容到剪贴板
  1. context.fillStyle = 'yellow';   
  2. context.strokeStyle = 'black';   
  3.   

设置完上下文所需的颜色后,我们必须为脸画一个圆。不幸的是,上下文中没有圆的预定义方法,因此我们需要使用所谓的路径(path)。路径只是一系列的相连的直线和曲线,路径在绘图完成后关闭。
 

XML/HTML Code复制内容到剪贴板
  1. context.beginPath();   
  2. context.arc(320, 240, 200, 0, 2 * Math.PI);   
  3. context.fill();   
  4. context.stroke();   
  5. context.closePath();   
  6.   

这样解释,我们运用上下文开始一个新的路径。接下来,我们在点(320、240)上创建一个半径为200像素的圆弧。最后两个参数指定构建圆弧的初始和最终角度,所以我们传递0和2 *Math.PI,来创建一个完整的圆。最后,我们运用上下文基于我们已经设置的颜色进行填充并画出路径。

尽管关闭路径不是脚本的功能所必须的,但我们还是需要关闭路径,这样就可以开始绘制笑脸中新的眼睛和嘴。眼睛可以通过同样的方式完成,每个眼睛需要较小的半径和不同的位置。但首先我们必须记住设置填充颜色为白色。
 

XML/HTML Code复制内容到剪贴板
  1. context.fillStyle = 'white';   
  2.     
  3. context.beginPath();   
  4. context.arc(270, 175, 30, 0, 2 * Math.PI);   
  5. context.fill();   
  6. context.stroke();   
  7. context.closePath();   
  8.     
  9. context.beginPath();   
  10. context.arc(370, 175, 30, 0, 2 * Math.PI);   
  11. context.fill();   
  12. context.stroke();   
  13. context.closePath();   
  14.   

以上是关于眼睛的所有代码。现在嘴巴很相似,但这次我们不会填满圆弧,我们的角度将配置为一个半圆。要做到这一点,我们需要设置起始角度为零和结束角度为-1 * Math.PI。请记住,不要忘记将画笔的颜色设置为红色。
 

XML/HTML Code复制内容到剪贴板
  1. context.fillStyle = 'red';   
  2.     
  3. context.beginPath();   
  4. context.arc(320, 240, 150, 0, -1 * Math.PI);   
  5. context.fill()   
  6. context.stroke();   
  7. context.closePath();   

祝贺

干的不错。你已经完成了本教程,你做了一个很棒的笑脸,同时学习了更多关于Canvas、HTML、JavaScript,和文档对象模型的知识。如果你有任何问题,请留言。

HTML / CSS 相关文章推荐
纯CSS3实现的8种Loading动画效果
Jul 05 HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 HTML / CSS
CSS3中设置3D变形的transform-style属性详解
May 23 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
Jun 20 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
Nov 04 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 HTML / CSS
HTML5实现获取地理位置信息并定位功能
Apr 25 #HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 #HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
Apr 24 #HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 #HTML / CSS
HTML5 Canvas的事件处理介绍
Apr 24 #HTML / CSS
HTML5 audio标签使用js进行播放控制实例
Apr 24 #HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
Apr 24 #HTML / CSS
You might like
PHP 判断变量类型实现代码
2009/10/23 PHP
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
探讨php中header的用法详解
2013/06/07 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
2013/07/31 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
获取url中用&amp;隔开的参数实例(分享)
2017/05/28 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
js实现带积分弹球小游戏
2020/07/21 Javascript
python实现简单ftp客户端的方法
2015/06/28 Python
python登录豆瓣并发帖的方法
2015/07/08 Python
python3爬虫之设计签名小程序
2018/06/19 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
考试诚信承诺书
2014/05/23 职场文书
药剂专业求职信
2014/06/20 职场文书
工程部经理岗位职责
2015/02/02 职场文书
大学生实习证明
2015/06/16 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js
MySQL导致索引失效的几种情况
2022/06/25 MySQL