開發(fā)APP繪圖功能如何解決Canvas加載問題，深圳APP開發(fā)公司提醒Canvas在頁面上的使用從元素定義開始，代碼如下：
<canvaswidth="150"height="150"></canvas>Canvas元素擁有width和height兩個屬性，均可選，并且可以用DOM屬性或者CSS來設置。
如果不指定寬高，就會默認為寬300像素、高150像素。通過CSS設置Canvas的寬高有時會出現(xiàn)渲染變形，建議設置Canvas的width和height屬性。很多老一代的瀏覽器不支持Canvas，這時需要對不支持Canvas的瀏覽器做出提示。提示的設置非常簡單，只需要在Canvas的元素內(nèi)插入提示文本內(nèi)容，不支持Canvas的瀏覽器就會將其識別為未知標簽兼容渲染成為文字信息，而支持Canvas的瀏覽器就會做出正確的渲染，代碼如下：
<canvaswidth="150"height="150">您的瀏覽器不支持canvas，請升級后再使用！</canvas>當Canvas被添加到頁面上后，初始化渲染是空白的。想要在上面通過腳本進行圖形繪制首先需要獲得渲染的上下文，通過Canvas元素對象的getContext方法獲得。下面給出使用Canvas繪制一個矩形的示例。
【代碼6-1】
01 < html> 02 < head> 03 < script> 04 window. onload = function() { // 資源 加載 結束 后 觸發(fā) 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開發(fā)關于繪圖解決什么是SVGSVG？
（ScalableVectorGraphics，可縮放矢量圖形）是基于XML（可擴展標記語言）用來描述二維矢量圖形的一種圖形格式。SVG誕生于2000年8月，由W3C（國際互聯(lián)網(wǎng)標準組織）制定，由于采用文本格式的描述性語言來渲染圖片，因此產(chǎn)生的圖片和圖像分辨率無關，即使縮放圖形像質(zhì)也不會下降。SVG有如下優(yōu)點：基于XML，繼承了XML跨平臺和可擴展的特性。采用文本描述圖形對象，利于搜索引擎通過文本內(nèi)容搜索圖片信息。良好的交互和動態(tài)特性，可以在其中嵌入動畫，通過腳本收縮、旋轉調(diào)整圖形。對DOM支持完整，可以通過腳本獲取元素、監(jiān)聽元素事件。
體積小下載快，與GIF和JPG格式的圖片相比具有較小的體積，在互聯(lián)網(wǎng)上傳輸有明顯優(yōu)勢。SVG并不是本書的重點，所以下面通過一個簡單的示例來介紹SVG的初步功能?！敬a6-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所示。
示例代碼雖然簡單，但是包含了很多比較陌生的屬性和節(jié)點信息。
第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規(guī)范，里面包含了所有SVG允許使用的元素。
第03行是整個繪圖SVG文件的根元素svg，類似于HTML文件中的html根元素。width和height屬性定義SVG的寬、高，version屬性定義SVG的版本，xmlns屬性定義SVG的命名空間。
第04行circle元素用來創(chuàng)建一個圓。cx和cy屬性定義圓中心的x和y軸坐標，默認設置均為0。r屬性用來定義圓的半徑。stroke和stroke-width屬性用來設置顯示圖形的輪廓，示例stroke被設置為黑色邊框，stroke-width被設置為2像素的邊框。fill屬性用來設置圖形內(nèi)填充的顏色。深圳APP開發(fā)公司提示所有標簽的規(guī)則必須嚴格遵循W3C規(guī)范，開啟標簽必須有對應的閉合標簽。好了，APP開發(fā)公司本文關于“開發(fā)APP繪圖功能如何解決Canvas加載問題”的相關知識就分享到這里，謝謝關注，博納網(wǎng)絡編輯整理。
