开发APP绘图功能如何解决Canvas加载问题_博纳网络深圳网站建设公司

当前位置：

发布时间：2019-07-23

文章编辑：网站建设文章来源：APP开发浏览量：次

开发APP绘图功能如何解决Canvas加载问题，深圳APP开发公司提醒Canvas在页面上的使用从元素定义开始，代码如下：
<canvaswidth="150"height="150"></canvas>Canvas元素拥有width和height两个属性，均可选，并且可以用DOM属性或者CSS来设置。
如果不指定宽高，就会默认为宽300像素、高150像素。通过CSS设置Canvas的宽高有时会出现渲染变形，建议设置Canvas的width和height属性。很多老一代的浏览器不支持Canvas，这时需要对不支持Canvas的浏览器做出提示。提示的设置非常简单，只需要在Canvas的元素内插入提示文本内容，不支持Canvas的浏览器就会将其识别为未知标签兼容渲染成为文字信息，而支持Canvas的浏览器就会做出正确的渲染，代码如下：
<canvaswidth="150"height="150">您的浏览器不支持canvas，请升级后再使用！</canvas>当Canvas被添加到页面上后，初始化渲染是空白的。想要在上面通过脚本进行图形绘制首先需要获得渲染的上下文，通过Canvas元素对象的getContext方法获得。下面给出使用Canvas绘制一个矩形的示例。

【代码6-1】

01 < html> 02 < head> 03 < script> 04 window. onload = function() { // 资源加载结束后触发 05 var canvas = document. querySelector(" canvas"); // 获取 canvas 元素 06 if (canvas. getContext) { 07 var ctx = canvas. getContext(" 2d"); // 获取渲染上下文 08 ctx. fillStyle = "rgb( 200, 50, 0)"; // 填充颜色 09 ctx. fillRect (50, 50, 50, 50); // 绘制矩形 10 } 11 } 12 </ script> 13 </ head> 14 < body> 15 < canvas width=" 150" height=" 150"> 您的浏览器不支持 canvas, 请升级后再使用！ </ canvas>

16 </ body> 17 </ html>

示例的运行效果如图6.1所示。

APP开发关于绘图解决什么是SVGSVG？
（ScalableVectorGraphics，可缩放矢量图形）是基于XML（可扩展标记语言）用来描述二维矢量图形的一种图形格式。SVG诞生于2000年8月，由W3C（国际互联网标准组织）制定，由于采用文本格式的描述性语言来渲染图片，因此产生的图片和图像分辨率无关，即使缩放图形像质也不会下降。SVG有如下优点：基于XML，继承了XML跨平台和可扩展的特性。采用文本描述图形对象，利于搜索引擎通过文本内容搜索图片信息。良好的交互和动态特性，可以在其中嵌入动画，通过脚本收缩、旋转调整图形。对DOM支持完整，可以通过脚本获取元素、监听元素事件。

体积小下载快，与GIF和JPG格式的图片相比具有较小的体积，在互联网上传输有明显优势。SVG并不是本书的重点，所以下面通过一个简单的示例来介绍SVG的初步功能。【代码6-2】
01 <? xml version=" 1. 0" standalone=" no"?> 02 <! DOCTYPE svg PUBLIC "-//W3C// DTD SVG 1. 1// EN" "http:// www. w3. org/ Graphics/ SVG/ 1. 1/ DTD/ svg11. dtd"> 03 < svg width=" 100%" height=" 100%" version=" 1. 1" xmlns=" http:// www. w3. org/ 2000/ svg"> 04 < circle cx=" 100" cy=" 100" r=" 50" stroke=" black" stroke- width=" 2" fill=" blue"/> 05 </ svg>

以svg为后缀保存文件，使用Chrome浏览器打开，效果如图6.2所示。

示例代码虽然简单，但是包含了很多比较陌生的属性和节点信息。
第01行定义了XML文件的声明。这里有一个很关键的属性standalone，表示该SVG文件是否引用外部文件，在示例中被赋值为no意味着该文件会引用一个外部文件，地址为“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。上面提到的DTD文件“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”主要用于SVG规范，里面包含了所有SVG允许使用的元素。
第03行是整个绘图SVG文件的根元素svg，类似于HTML文件中的html根元素。width和height属性定义SVG的宽、高，version属性定义SVG的版本，xmlns属性定义SVG的命名空间。
第04行circle元素用来创建一个圆。cx和cy属性定义圆中心的x和y轴坐标，默认设置均为0。r属性用来定义圆的半径。stroke和stroke-width属性用来设置显示图形的轮廓，示例stroke被设置为黑色边框，stroke-width被设置为2像素的边框。fill属性用来设置图形内填充的颜色。深圳APP开发公司提示所有标签的规则必须严格遵循W3C规范，开启标签必须有对应的闭合标签。好了，APP开发公司本文关于“开发APP绘图功能如何解决Canvas加载问题”的相关知识就分享到这里，谢谢关注，博纳网络编辑整理。

当前文章链接：/construction/appkaifa/3259.html

上一篇：HTML5制作APP怎样解决Canvas绘图问题下一篇：企业APP怎么分析用户行为？

返回列表