在HTML中定义好Canvas标签后，需要通过JavaScript进行图形的绘制。
Canvas只是一个HTML5画布元素，它本身只是一个标签，并不具备绘制功能。如果要绘制图形，首先我们要获取到绘图环境，我们需要JavaScript给我们提供的API来对画布进行操作：
getContext()方法返回一个用于在画布上绘图的环境对象，通过使用该对象的属性、方法来进行图像绘制。
（1）语法
（2）参数
参数contextID指定了您想要在画布上绘制的类型。目前我们可以填写的值为"2d"（注意：2d的字母d必须要小写），指定绘制类型为二维绘图，并且通过这个方法返回一个环境对象，该对象导出一个二维绘图API。
（3）返回值
一个Canvas Rendering Context2D对象，我们通过这个对象来绘制图形。
代码清单：通过脚本获取绘图环境。
效果如图7-3所示。
Canvas坐标系：
画布左上角为坐标原点(0,0)，横向为x轴，纵向为y轴。效果如图7-3所示。
图7-3
Canvas元素绘制图像的时候有两种方法，分别是：
style：在进行图形绘制前，要通过以下几个属性设置好绘图的样式，分别可以通过三种方式来设置填充颜色。
rgb方式：
十六进制方式：
单词方式：
颜色的表示方式:
直接用颜色名称:"red""green""blue”
十六进制颜色值:"#EEEEFF”
rgb(1-255,1-255,1-255)
rgba(1-255,1-255,1-255,透明度)
绘制填充矩形：
定义和用法
fillRect()方法绘制“已填色”的矩形。默认的填充颜色是黑色。
提示
使用fillstyle属性来设置用于填充绘图的颜色、渐变或模式（后续章节会介绍渐变填充），
JavaScript语法：
参数值如表7-1所示。
表7-1
代码清单：绘制填充矩形。
效果如图7-4所示。
图7-4
绘制矩形框：定义和用法。
strokeRect()方法绘制一个描边效果的矩形。笔触的默认颜色是黑色。
提示
请使用strokeStyle属性来设置笔触的颜色、渐变或模式（后续章节会介绍渐变填充）。
JavaScript语法为：
参数值如表7-2所示。
表7-2
代码清单：绘制矩形框。
效果如图7-5所示。
图7-5
绘制路径：
beginPath()开始一条路径，或重置当前的路径。
moveTo(x，y)设置路径起点坐标(x，y)。
lineTo()：添加一个新点，然后创建从该点到画布中最后指定点的路径（该方法只设定位置并不会绘制线条）。
closePath()：创建从当前点到开始点的路径。
beginPath()与closePath()结合使用，主要作用是避免绘制之间的相互影响。
代码清单：绘制矩形框。
效果如图7-6所示。
图7-6
绘制圆形或者椭圆：
arc()方法创建弧/曲线（用于创建圆或部分圆）。
提示
如需通过arc()来创建圆，请把起始角设置为0，结束角设置为2*Math.PI，如图7-7所示。
图7-7
JavaScript 语法：
参数值如表7-3所示。
表7-3
代码清单：绘制圆形框。
效果如图7-8所示。
图7-8(www.chuimin.cn)
绘制弧线：
arcTo()方法在画布上创建介于两个切线之间的弧/曲线。
提示
请使用stroke()方法在画布上绘制确切的弧。
JavaScript语法：
参数值如表7-4所示。
表7-4
代码清单：绘制弧线。
效果如图7-9所示。
图7-9
绘制二次贝塞尔曲线：
quadraticCurveTo()方法：通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。
提示
二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用beginPath()和moveTo()方法来定义开始点，效果如图7-10所示。
图7-10
开始点：moveTo(20，20)
结束点：quadraticCurveTo(20，100，200，20)；
JavaScript语法：
参数值如表7-5所示。
表7-5
代码清单：绘制二次贝赛尔曲线。
效果如图7-11所示。
图7-11
绘制三次贝塞尔曲线：
定义和用法：bezierCurveTo()方法使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。
提示
三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用beginPath()和moveTo()方法来定义开始点，效果如图7-12所示。
图7-12
开始点：moveTo(20，20)
结束点：bezierCurveTo(20，100，200，100，200，20)
JavaScript语法：
参数值如表7-6所示。
表7-6
代码清单：绘制三次贝塞尔曲线。
效果如图7-13所示。
图7-13
绘制渐变：
Context对象可以通过createLinearGradient()和createRadialGradient()两个方法创建渐变对象，这两个方法的原型如下：
创建一个从(x1，y1)点到(x2，y2)点的线性渐变对象的代码如下所示。
创建一个从以(x1，y1)点为圆心、r1为半径的圆到以(x2，y2)点为圆心、r2为半径的圆的径向渐变对象的效果如图7-14所示。
图7-14
渐变对象创建完成之后必须使用它的addColorStop()方法来添加颜色，该方法的原型如下：
其中position表示添加颜色的位置，取值范围为[0,1]，0表示起点，1表示终点；color表示添加的颜色，取值可以是任何CSS颜色值。
线性渐变：
代码清单：绘制线性渐变。
效果如图7-15所示。
图7-15
镜像渐变：
代码清单：绘制镜像渐变。
效果如图7-16所示。
图7-16
阴影效果也是我们常用的表现方式，阴影有四个状态值控制，分别是shadowBlur，shadowOffsetX，shadowOffsetY和shadowColor。其中shadowBlur为阴影的像素模糊值，shadowOffsetX和shadowOffsetY为阴影在x轴和y轴上的偏移值，shadowColor为阴影颜色值，其中默认的值是前三个值都为0，最后一个值设置为透明黑色。只需修改其中的两个值就可以显现出来阴影效果。
阴影常用API如表7-7所示。
表7-7
代码清单：绘制阴影。
效果如图7-17所示。
图7-17
有关HTML5实战宝典的文章
Canvas在HTML5中是一个非常强大的元素，接下来，我们开始去学习它。要使用Canvas来绘制图形必须在页面中添加Canvas的标签。而在样式表中修改Canvas标签宽高属性则是对它的内容进行缩放,如果比例与Canvas本身比例不一致会导致图像的扭曲。如果出现扭曲可以通过调整Canvas标签属性width、height来确保比例一致。使用Canvas画布请使用一个代码编辑器，新建一个HTML5的基本文档。我们需要在
标签中放置一个Canvas元素。代码清单：HTML中添加Canvas标签如果浏览器支持，效果如图7-1所示。......2023-10-28
Canvas给我们提供了绘制文字的方法。该属性的用法与CSSfont属性使用方式相同，例如：font属性的默认值如表7-9所示。通常，文本会从指定位置开始，不过，如果您设置为textAlign="right"并将文本放置到位置150，那么会在位置150结束。表7-10表7-11图7-24演示了textAlign属性值对齐方式。图7-24textBaseline属性设置或返回在绘制文本时的当前文本基线。表7-13strokeText()方法在画布上绘制文本。文本的默认颜色是黑色。表7-14代码清单：绘制文本效果如图7-26所示。......
2023-10-28
本节主要介绍Canvas在图像像素数据操作方面的常用API，如表7-16所示。表7-16createImageData()方法，有两个版本的createImageData()方法以指定的尺寸创建新的ImageData对象：创建与指定的另一个ImageData对象尺寸相同的新ImageData对象：参数值如表7-17所示。表7-19代码清单：像素操作。......
2023-10-28
1995年11月，IETF发布了HTML 2.0，它是HTML最早的规范。1996年的1月，W3C 推出 HTML3.2。在之后三年的时间内，W3C 对HTML做了很多改进，并相继发布了几个版本。与此同时，W3C还在继续研究XHTML。2006年，W3C选择开发HTML5，自己成立了HTML5的工作组，它在WHATWG研发的HTML5 的基础上研究。2008年，W3C发布了 HTML5的草案，这是HTML5的最初版本。2013年，大部分的手机都开始支持HTML5的应用。终于，经过8年的艰辛研究后，在2014年10月29日，W3C宣布HTML5的标准规范制定完成。......
2023-10-28
基于Flash，Adobe Flash通过自己的Socket完成数据交换，再利用Flash暴露出相应的接口为JavaScript调用，从而达到实时传输目的。在此背景下，基于HTML5规范的，有Web TCP之称的WebSocket应运而生。直到2014年，HTML5正式从草案落实为实际标准规范，各个应用服务器及浏览器厂商逐步开始统一，在JavaEE 7中也实现了WebSocket协议，从而无论是客户端还是服务端的WebSocket都已完备，读者可以查阅HTML5规范，熟悉新的HTML协议规范及WebSocket支持。......
2023-10-28
本章重点知识4.1 File API4.2 HTML5拖拽事件4.3 dataTransfer对象4.4 利用拖拽效果完成上传功能对文件的处理和上传等操作一直是Web开发中的一项重要环节,比如在填写个人信息时的头像上传，或者是邮件的上传等。拖拽的文件也可以由File对象接收到，也就是说，我们现在可以直接通过HTML5实现拖拽文件上传功能了！......
2023-10-28
接下来，我们来认识一些新增type属性：1.email输入类型说明：此类型要求键入格式正确的Email地址，否则浏览器是不允许提交的，并会有一个错误信息提示。格式：效果展示如图3-12所示：图3-127.tel输入类型说明：此类型要求输入一个电话号码，换行符会从输入值中去掉。因为不同国家不同地区的电话号码差别明显，所以想要添加更多限制可以使用下一节会讲到的pattern等属性。......
2023-10-28
值为Boolean类型，一个文档中只能有一个表单控件具有此属性。格式：3.novalidate属性说明：此属性定义form或者某个input标签被提交时不用经过表单验证。格式：4.autocomplete属性用于指示input元素是否能够拥有一个默认值，这个默认值是由浏览器自动补全的。这个设定可以被属于这个form的子元素的autocomplete属性覆盖。......
2023-10-28
相关推荐