开发APP如何利用Canvas核心绘图技术？深圳APP开发公司本文介绍HTML5核心的绘图控件Canvas。绘图<canvas>标签用于定义图形，比如图表图像等，是HTML5标准新提供的绘图容器。
绘制图形画图软件已经不再是本地应用的专利了，越来越多的网站提供了在线版的画图应用。有的通过Flash实现，有的通过HTML5实现。本例给出了HTML5实现的简单画板。画板分成两个部分，第1部分为矩形，第2部分为圆形。两部分都有1个调节区和1个画布区。画布区默认绘制1个对应图形，调整颜色控件或拖动滑块同步作用于绘制的图形。通过本示例可以了解Canvas图形绘制接口的使用。使用Chrome浏览器打开网页文件，运行效果如图6.6所示。
点击“矩形”颜色控件，设置画布中的黄色矩形颜色为红色，然后点击“圆形”颜色控件，设置画布中的蓝色圆形颜色为绿色，效果如图6.7所示。
利用编辑器打开“6-4.绘制图形：矩形和圆形.html”文件，代码如下：
【代码6-4】
【代码6-4】
01 <! DOCTYPE HTML> 02 < html> 03 < head> 04 < style> 05 ul{ float: left; list- style: none; } 06 hr{ clear: both; } 07 canvas{ border: 2px solid black; float: left; margin: 15px;
15px; } 08 </ style> 09 </ head> 10 < body> 11 < header>< h2> 绘制 图形： 矩形 和 圆形</ h2></ header> 12 <!-- 矩形 Canvas 画布 设置 区 --> 13 < ul> 14 < li>< h3> 矩形</ h3></ li> 15 < li> 颜色：< input id=" color_ rect" type=" color" value="# eabb02" /></li> 16 < li> X 轴：< input id=" x_ rect" type=" range" min=" 0" max=" 150" value=" 75" step=" 1" /></li> 17 < li> Y 轴：< input id=" y_ rect" type=" range" min=" 0" max=" 150" value=" 75" step=" 1" /></li> 18 < li> 宽度：< input id=" width_ rect" type=" range" min=" 0" max=" 200" value=" 50" step=" 1" /></li> 19 < li> 高度：< input id=" height_ rect" type=" range" min=" 0" max=" 200" value=" 50" step=" 1" /></li> 20 </ ul> 21 <!-- 圆形 Canvas 画布 设置 区 -->
22 < ul> 23 < li>< h3> 圆形< h3></ li> 24 < li> 颜色：< input id=" color_ circle" type=" color" value="# 506cc0"/></ li> 25 < li> X 轴：< input id=" x_ circle" type=" range" min=" 0" max=" 200" value=" 100" step=" 1" /></li> 26 < li> Y 轴：< input id=" y_ circle" type=" range" min=" 0" max=" 200" value=" 100" step=" 1" /></li> 27 < li> 半径：< input id=" radius_ circle" type=" range" min=" 0" max=" 100" value=" 25" step=" 1" /></li> 28 </ ul> 29 < hr /> 30 <!-- 矩形 Canvas 画布 --> 31 < canvas id=" canvas_ rect" width=" 200" height=" 200"></ canvas> 32 <!-- 圆形 Canvas 画布 --> 33 < canvas id=" canvas_ circle" width=" 200" height=" 200"></ canvas> 34 </ body> 35 < script> 36 (function () { 37 // 获取 矩形 Canvas 画布 绘图 上下文
38 var content_ rect = document. getElementById(' canvas_ rect') .getContext(" 2d"), 39 // 获取 圆形 Canvas 画布 绘图 上下文 40 canvas_ circle = document. getElementById(' canvas_ circle') .getContext(" 2d"); 41 function draw_ rect() { // 获取 控 件数 据 绘制 矩形 42 content_ rect. clearRect( 0, 0, 300, 300); // 清空 给定 矩形 43 content_ rect. fillStyle = color_ rect. value; // 填充 矩形 画布 原色 44 content_ rect. fillRect( // 填充 矩形 45 parseInt( x_ rect. value), // 矩形 左 上角 的 x 坐标 46 parseInt( y_ rect. value), // 矩形 左 上角 的 y 坐标 47 parseInt( width_ rect. value), // 矩形 的 宽度， 以 像素 计 48 parseInt( height_ rect. value) // 矩形 的 高度， 以 像素 计 49 ); 50 };
51 var color_ rect = document. getElementById(' color_ rect'), // 获取 矩形 颜色 选择 元素 52 x_ rect = document. getElementById(' x_ rect'),// 获取 矩形 x 轴 滑 块 元素 53 y_ rect = document. getElementById(' y_ rect'),// 获取 矩形 y 轴 滑 块 元素 54 width_ rect = document. getElementById(' width_ rect'), // 获取 矩形 宽度 滑 块 元素 55 height_ rect = document. getElementById(' height_ rect'); // 获取 矩形 高度 滑 块 元素 56 // 循环 矩形 设置 元素， 绑 定数 据 变更 change 事件 57 [color_ rect, x_ rect, y_ rect, width_ rect, height_ rect]. forEach( function (item) { 58 item. addEventListener(' change', draw_ rect, false); 59 }); 60 draw_ rect(); // 绘制 默认 矩形 61 function draw_ circle() { // 获取 控 件数 据 绘制 圆形 62 canvas_ circle. clearRect( 0, 0, 300, 300); // 清空 给定 矩形 63 canvas_ circle. fillStyle = color_ circle. value; //
// 填充 矩形 画布 原色 64 canvas_ circle. beginPath(); // 起始 一条 路径 65 canvas_ circle. arc( // 创建 圆形 66 parseInt( x_ circle. value), // 圆的 中心 的 x 坐标 67 parseInt( y_ circle. value), // 圆的 中心 的 y 坐标 68 parseInt( radius_ circle. value), // 圆的 半径 69 0, // 起始 角， 以 弧度 计 70 2 * Math. PI, // 结束 角， 以 弧度 计 71 true // 逆时针 或 顺时针 绘图 72 //（ false： 顺时针， true： 逆时针） 73 ); 74 canvas_ circle. closePath(); // 创建 从 当前 点 回到 起 始点 的 路径 75 canvas_ circle. fill(); // 填充 当前 绘图 76 }; 77 var color_ circle = document. getElementById(' color_ circle'),
circle'), // 获取 圆形 颜色 选择 元素 78 x_ circle = document. getElementById(' x_ circle'), // 获取 圆形 x 轴 滑 块 元素 79 y_ circle = document. getElementById(' y_ circle'), // 获取 圆形 y 轴 滑 块 元素 80 radius_ circle = document. getElementById(' radius_ circle'); // 获取 圆形 半径 滑 块 元素 81 // 循环 圆形 设置 元素， 绑 定数 据 变更 change 事件 82 [color_ circle, x_ circle, y_ circle, radius_ circle]. forEach( function (item) { 83 item. addEventListener(' change', draw_ circle, false); 84 }); 85 draw_ circle(); // 绘制 默认 圆形 86 })(); 87 </ script> 88 </ html>
代码第12～20行是矩形调节区的HTML结构，第21～28行是圆形调整区的HTML结构。
代码第31和33行分别是矩形和圆形的画布。
代码第31和33行分别是矩形和圆形的画布。
代码第38和40行分别从文档中获取对应画布的上下文。
代码第41～50行为函数draw_rect，用于在画布上绘制矩形。该函数第42行代码清空画布上固定矩形区域的内容，就像平时所用的橡皮擦。clearRect方法拥有4个参数，
语法如下：context.clearRect(x,y,width,height)
x：要清除的矩形左上角的x轴坐标。
y：要清除的矩形左上角的y轴坐标。
width：要清除的矩形的宽度，以像素计。
height：要清除的矩形的高度，以像素计。代码第43行获取矩形调节区颜色控制的值，设置矩形画布的颜色。
代码第44～49行填充1个矩形，fillRect方法拥有4个参数，参数用法与clearRect方法相同，语法如下：context.fillRect(x,y,width,height)代码第51～55行获取矩形调节区颜色控件和各滑块元素。代码第57～59行监听矩形调节区各控件的change事件。当各控件的值发生变化时，调用函数draw_rect重新绘制矩形。代码第60行调用函数draw_rect，使用矩形调节区各控件的默认值绘制默认矩形。
代码第41～50行为函数draw_rect，用于在画布上绘制矩形。该函数第42行代码清空画布上固定矩形区域的内容，就像平时所用的橡皮擦。clearRect方法拥有4个参数，
语法如下：context.clearRect(x,y,width,height)
x：要清除的矩形左上角的x轴坐标。
y：要清除的矩形左上角的y轴坐标。
width：要清除的矩形的宽度，以像素计。
height：要清除的矩形的高度，以像素计。代码第43行获取矩形调节区颜色控制的值，设置矩形画布的颜色。
代码第44～49行填充1个矩形，fillRect方法拥有4个参数，参数用法与clearRect方法相同，语法如下：context.fillRect(x,y,width,height)代码第51～55行获取矩形调节区颜色控件和各滑块元素。代码第57～59行监听矩形调节区各控件的change事件。当各控件的值发生变化时，调用函数draw_rect重新绘制矩形。代码第60行调用函数draw_rect，使用矩形调节区各控件的默认值绘制默认矩形。
圆形区的代码基本与矩形区的相似，只是在调用画布上下文的方法上略有不同，绘制圆形通过draw_circle函数实现。代码第64行调用方法beginPath，告诉画布开始一条新的路径。假使不调用该方法，每次绘制的图形会被重叠。代码第65～73行调用方法arc以给定的坐标点为中心点以指定半径画1条弧，语法如下：context.arc(x,y,radius,startAngle,endAngle,counterclockwise)x，y：弧圆心坐标。radius：弧圆心半径。startAngle，endAngle：弧的开始点和结束点弧度。counterclockwise：弧沿逆时针true或顺时针false绘制。代码第74行调用closePath方法关闭之前打开的路径。第75行调用fill方法，使用设置的fillStyle属性颜色填充绘制的路径。好了，APP开发公司本文关于“开发APP如何利用Canvas核心绘图技术？”的相关知识就分享到这里，谢谢关注，博纳网络编辑整理。
当前文章链接：/construction/appkaifa/3294.html
如果您觉得案例还不错请帮忙分享：
[声明]本网转载网络媒体稿件是为了传播更多的信息，此类稿件不代表本网观点，本网不承担此类稿件侵权行为的连带责任。故此，如果您发现本网站的内容侵犯了您的版权，请您的相关内容发至此邮箱【qin@198bona.com 】，我们在确认后，会立即删除，保证您的版权。
.jpg)