基于HTML5 Canvas 绘图技术应用研究
2020-06-18梁敦毫广东茂名幼儿师范专科学校
梁敦毫 广东茂名幼儿师范专科学校
一、引言
HTML5 自2014 年10 发布以来，正逐步取代原有的标准，实现夸平台的无缝对接。在HTML5 出现之前，Web 开发者主要是通过flash 插件实现Web 绘画，flash 不仅降低了Web 的交互性，大量的添加会严重影响Web 的性能，同时flash 内容不能被搜索引擎检索，更麻烦的是浏览器必须安装flash 插件才能正常显示。Canvas是HTML5 新增元素，可以利用JavaScript 调用Canvas 相应的API，实现动态的绘图及渲染。为适应社会的需求，学校开设了专门的HTML5 课程，为做好HTML5 的教学工作，特对Canvas 绘图进行探究。
二、开发工具HBuilder 介绍
目前主流的前端开发工具有以Windows notepad 为代表的纯文本编辑器，以及HBuilder、Deamweaver、WebStorm、Vscode、Brackets 等集成开发环境，适合H5 的只有HBuilder、Brackets 和WebStorm，本文是采用HBuilder 作为开发工具。
HBuilder 是DCloud（数字天堂）推出的一款支持HTML5 的Web 开发IDE。快，是HBuilder 的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css 的开发效率。
三、绘图基本过程
1.创建Canvas 元素
向HTML5 网页添加Canvas 元素，并设置元素的id 为My_Canvas，设置画布的宽度为300 像素，高度为300 像素，同时给它添加实线边框。
＜canvas id="My_Canvas" width="300" height="300"style="border：2px solid #5C5C5C；" ＞＜/canvas＞
2.绘图
Canvas 是HTML5 新增元素，可以在HTML上创建一个画布，但它不具备绘图能力，要完成绘图，需要借助JavaScript。通过调用相应的API 可以实现绘制路径、矩形、圆、字符、添加图像以及手绘图形。下面将从不同的绘图方式分别介绍：
1)画线
画线是最容易实现的，通过指定线的开始和结束位置，来绘制一条线。该方法可以指定多个结束位置，并按顺序绘制多条线段。
图1
JavaScript 代码如下：
＜script type="text/javascript"＞
var a=document.getElementById("My_Canvas")；
var cavs=a.getContext("2d")；
cavs.moveTo(50，50)；
cavs.lineTo(250，150)；
cavs.lineTo(250，250)；
cavs.lineTo(150，150)；
cavs.stroke()；＜/script＞
首先，使用document 对象的方法获取ID 为My_Canvas 的画布元素：
var cavs =document.getElementById("My_Canvas ")；
接着，创建一个二维对象：
var cavs =c.getContext("2d")；
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
在Canvas上要实现绘线，需要指定开始点和结束点的坐标，再绘制线条。指定开始坐标用moveTo(x，y)方法；指定结束点用lineTo(x，y)方法；绘制线条使用stroke()方法。实例中（如图1 所示），有四个坐标点，A（50，50）是起点，B（250，150）是第一个结束点，C（250，250）是第二个结束点，D（150，150）是第三个结束点，然后利用stroke()方法绘制四个点间的三条线。
2)矩形
cavs.fillStyle="#00FF00"；
cavs.fillRect(50，50，180，150)；
fillStyle 方法是用于填充颜色的，这里是给图形填充绿色。fillRect 方法是规定形状、位置和尺寸的。fillRect 方法共有4 个参数，（50，50）是要绘制的矩形左上角的x 轴和y 轴的坐标，180 是矩形的宽度，150 是矩形的高度。
3) 画圆
通过arc()方法来规定圆的位置、尺寸和形状。我们分别以坐标（90，80）和（180，80）为中心点，半径都为30 的圆，结束角为Math.PI*2 绘制两个圆，如图2。
cavs.beginPath()；
cavs.arc(90，80，30，0，Math.PI*2，true)；
cavs.closePath()；
cavs.stroke()；
cavs.beginPath()；
cavs.arc(180，80，30，0，Math.PI*2，true)；
cavs.stroke()；
cavs.closePath()；
图2
此处用beginPath()方法和closePath()方法，它们分别表示开始绘制路径和结束绘制路径。当在画布里绘制多个图形时，就需要在绘制每一个图形时，用这两个方法告诉系统绘图的开始和结束。否则系统会默认这几个绘图是连续的，会在连个图形间形成一条连线。例如这个案例绘完第一个圆后没用closePath()结束绘图，那么系统会把连个圆连成一体，结果如图3 所示。
cavs.beginPath()；
cavs.arc(90，80，30，0，Math.PI*2，true)；
cavs.arc(180，80，30，0，Math.PI*2，true)；
cavs.stroke()；
cavs.closePath()；
图3
4)文本
使用canvas 绘制文本，主要用到以下属性：
font - 定义字体
例如：cavs.font="50px 华文行楷"；定义了字体为“华文行楷”，高为50 像素。
fillText(text，x，y) 表示绘制实心的文本
例如：；
cavs.fillText("欢迎！"，60，100)；；在坐标（60，100）的位置绘制了实心的文本“欢迎！”，效果如图4 所示：
图4
strokeText(text，x，y) -表示绘制空心的文本
例如：strokeText("欢迎！"，60，100)； 在坐标（60，100）的位置绘制了空心的文本“欢迎！”，效果如图5 所示：
图5
5)图片
Canvas 支持把图片放在画布上，它通过drawImage()方法来实现，下面通过一个实例来介绍具体的实现。
var c=document.getElementById("My_Canvas")；
var cavs =c.getContext("2d")；
var imgs = new Image()；
imgs.src = "images/image.jpg"；
imgs onload = function(){
cavs.drawImage(imgs，15，15)；
cavs.drawImage(imgs ，150，10，150，160)；
cavs.drawImage(imgs，15，15，55，55，210，10，150，150)；
}；
drawImage()方法有三种不同的用法：
context.drawImage(imgs，15，15)；在画布上添加图片imgs，并设置图片坐标为（15，15）；
context.drawImage(imgs ，150，10，150，160)； 在画布上添加图片imgs，设置图片坐标为（150，10），并规定图片的宽为150，高为160；
context.drawImage(imgs，15，15，55，65，210，10，150，150) ；剪切图片，并在画布上定位被剪切的部分，被剪切的起始坐标为（15，15），被剪切图片的宽度为55，高度为65。
四、结束语
HTML5作为新一代的HMTL标准，最大的优势是兼容移动平台。它的新增元素Canvas及其API接口可以轻松地绘制基本图形，如路径、圆、矩形等。同时Canvas 还可以给绘图填充颜色，设置阴影，裁剪等效果，由于篇幅有限，这里不作详细介绍。基于Canvas 绘图的优势利用，该技术将大量被应用于Web 开发，还有轻量级的游戏开发。
