使用HTML5canvan進(jìn)行Web繪圖-創(chuàng)新互聯(lián)

參考：http://www.html5china.com/HTML5features/canvas/

成都創(chuàng)新互聯(lián)是一家專注于成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)與策劃設(shè)計(jì),寧陜網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:寧陜等地區(qū)。寧陜做網(wǎng)站價(jià)格咨詢:028-86922220

開(kāi)始：

<canvas id="canvas" width="300" height="200">
Fallback content, in case the browser does not support Canvas.
</canvas>

需要指明的是，由于無(wú)法保證所有用戶使用的瀏覽器都能夠支持 canvas 元素，所以在目前開(kāi)發(fā)基于 canvas 的 Web 應(yīng)用中需要增加“Fallback content”，以提示用戶他們無(wú)法正常體驗(yàn)此功能的原因或建議他們?nèi)ハ螺d最新的瀏覽器。

這里，好奇的讀者可能會(huì)問(wèn)，既然這是一個(gè)普通的 DOM 節(jié)點(diǎn)，那么便意味著可以通過(guò)直接改變其 width 或 height 屬性值來(lái)改變 canvas 的大?。看_實(shí)如此，但是，正如之前提到的 canvas 是一種像素級(jí)別的繪圖方法，因而，一旦動(dòng)態(tài)調(diào)整 canvas 的大小，canvas 將被“重置”到一個(gè)新的初始狀態(tài)，即便是如下這種操作，也會(huì)將 canvas 內(nèi)的位圖清除并將所有相關(guān)屬性恢復(fù)到初始值的狀態(tài)。當(dāng)然，我們也可以把這當(dāng)作重置 canvas 的小技巧來(lái)使用。

document.getElementById("canvas").width = document.getElementById("canvas").width;

簡(jiǎn)單圖形繪制

基于 canvas 的繪圖并不是直接在 canvas 標(biāo)記所創(chuàng)建的繪圖畫面上進(jìn)行各種繪圖操作，而是依賴畫面所提供的渲染上下文（Rendering Context），所有的繪圖命令和屬性都定義在渲染上下文當(dāng)中。在通過(guò) canvas id 獲取相應(yīng)的 DOM 對(duì)象之后首先要做的事情就是獲取渲染上下文對(duì)象。渲染上下文與 canvas 一一對(duì)應(yīng)，無(wú)論對(duì)同一 canvas 對(duì)象調(diào)用幾次 getContext() 方法，都將返回同一個(gè)上下文對(duì)象。目前，所有支持 canvas 標(biāo)簽的瀏覽器都支持 2D 渲染上下文，可以使用如下的代碼來(lái)獲取該對(duì)象。

var context = document.getElementById("canvas").getContext("2d");

除此之外，在不久的將來(lái)，開(kāi)發(fā)人員還會(huì)能夠得到基于 OpenGL 的 3D 渲染上下文以在 canvas 中進(jìn)行 3D 繪圖。

與 SVG 不同，canvas 原生支持的基本圖形只有矩形一種，至于其他的圓形，多邊形等圖形則都由路徑來(lái)負(fù)責(zé)繪制實(shí)現(xiàn)。清單 1 展示了如何使用渲染上下文中的矩形繪圖方法完成了圖 1 所示圖形。

例子及說(shuō)明：

清單 1. 繪制 canvas 矩形

				  <!DOCTYPE HTML> <html> <head>   <script type="text/javascript"> 		window. test(){ 			 var canvas = document.getElementById('canvas');  			 if (canvas.getContext){  				 var ctx = canvas.getContext('2d');  // 獲取 2D 渲染上下文		 				 ctx.clearRect(0,0,100,200)  ;// 清除以（0,0）為左上坐標(biāo)原點(diǎn)，300*200 矩形區(qū)域內(nèi)所有像素 				 ctx.fillStyle = '#00f';   // 設(shè)置矩形的填充屬性，#00f 代表藍(lán)色 				 ctx.strokeStyle = '#f00';  // 設(shè)置矩形的線條顏色，#f00 代表紅色 				 ctx.fillRect(50,50,150,80); // 使用 fillStyle 填充一個(gè) 150*80 大小的矩形 				 ctx.strokeRect(45,45, 160, 90);  // 以 strokeStype 屬性為邊的顏色繪制一個(gè)無(wú)填充矩形 			}  		}    </script> </head> <body> <canvas id="canvas" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>  </body> </html>

繪制路徑

在開(kāi)始動(dòng)手繪制路徑之前，首先需要明確的是：矩形繪制 API 是一種即時(shí)性的 API，他會(huì)在相應(yīng)的繪圖函數(shù)執(zhí)行完畢之后，將圖形即時(shí)的渲染在畫面上。然而路徑繪制 API 并非如此，完整的路徑繪制過(guò)程大致可以分為如下兩個(gè)階段：

定義路徑輪廓：

在每個(gè) canvas 實(shí)例對(duì)象中都擁有一個(gè) path 對(duì)象，創(chuàng)建自定義圖形的過(guò)程就是不斷對(duì) path 對(duì)象操作的過(guò)程。每當(dāng)開(kāi)始一次新的圖形繪制任務(wù)，都需要先使用 beginPath() 方法來(lái)重置 path 對(duì)象至初始狀態(tài)，進(jìn)而通過(guò)一系列對(duì) moveTo/lineTo 等畫線方法的調(diào)用，繪制期望的路徑，其中 moveTo(x, y) 方法設(shè)置繪圖起始坐標(biāo)，而 lineTo(x,y) 等畫線方法可以從當(dāng)前起點(diǎn)繪制直線，圓弧以及曲線到目標(biāo)位置。最后一步，也是可選的步驟，是調(diào)用 closePath() 方法將自定義圖形進(jìn)行閉合，該方法將自動(dòng)創(chuàng)建一條從當(dāng)前坐標(biāo)到起始坐標(biāo)的直線。

繪制路徑

定義完路徑的輪廓，此時(shí) canvas 畫面中沒(méi)有顯示任何路徑，開(kāi)發(fā)人員還可以對(duì)路徑進(jìn)行修改。一旦確定完成，則需要繼續(xù)調(diào)用 stroke()/fill() 函數(shù)來(lái)完成將路徑渲染到畫面的最后一步。路徑的輪廓顏色和填充顏色由 strokeStyle 和 fillStyle 屬性決定

<!DOCTYPE HTML>
<html>
<head>
  <script type="text/javascript">
        window.onload=function test(){
             var canvas = document.getElementById('canvas');
             if (canvas.getContext){
                 var ctx = canvas.getContext('2d');  // 獲取 2D 渲染上下文
                 ctx.clearRect(0,0,400,500)  ;// 清除以（0,0）為左上坐標(biāo)原點(diǎn)，300*200 矩形區(qū)域內(nèi)所有像素
                 ctx.fillStyle = '#00f';   // 設(shè)置矩形的填充屬性，#00f 代表藍(lán)色
                 ctx.strokeStyle = '#f00';  // 設(shè)置矩形的線條顏色，#f00 代表紅色
                 ctx.fillRect(50,50,150,80); // 使用 fillStyle 填充一個(gè) 150*80 大小的矩形
                 ctx.strokeRect(45,45, 160, 90);  // 以 strokeStype 屬性為邊的顏色繪制一個(gè)無(wú)填充矩形
            }
            var canvas2 = document.getElementById('canvas2');
              if (canvas2.getContext){
                 var ctx = canvas2.getContext('2d');
                 ctx.fillStyle = '#00f';
                 ctx.strokeStyle = '#f00';
                 ctx.beginPath();
                 ctx.arc(75,45,50,0,Math.PI, false);  // 繪制一條半圓弧線
                 ctx.closePath();    // 自動(dòng)繪制一條直線來(lái)關(guān)閉弧線。若不調(diào)用此方法，將僅僅顯示一條半圓弧
                 ctx.fill();      // 可以嘗試注釋掉 fill 或者 stroke 函數(shù)，觀察圖形的變化
                 ctx.stroke();
                 }
        }
   </script>
</head>
<body>
<canvas id="canvas" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<canvas id="canvas2" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
</body>
</html>

二維變形

Canvas 繪圖中另一個(gè)重要的概念是繪畫狀態(tài)（Drawing State），繪畫狀態(tài)反映了渲染上下文當(dāng)前的瞬時(shí)狀態(tài)，開(kāi)發(fā)人員可以通過(guò)對(duì)繪畫狀態(tài)的保存 / 恢復(fù)操作而快速的回到之前使用的各種屬性和變形操作。繪畫狀態(tài)主要由以下三個(gè)部分構(gòu)成：

當(dāng)前的變形矩陣（transformation matrix）
當(dāng)前的裁剪區(qū)域（clipping region）
當(dāng)前上下文中的屬性，比如 strokeStyle, fillType, globalAlpha, font 等等。

需要指出的是，當(dāng)前路徑對(duì)象以及當(dāng)前的位圖都不包含在繪畫狀態(tài)之中，路徑是持續(xù)性的對(duì)象，如前文所講，只有通過(guò) beginPath() 操作才會(huì)進(jìn)行重置，而位圖則是 canvas 的屬性，并非屬于渲染上下文的。

開(kāi)發(fā)人員可以使用 save 和 restore 兩種方法來(lái)保存和恢復(fù) canvas 狀態(tài)，每調(diào)用 save 方法，都會(huì)將當(dāng)前狀態(tài)壓入堆棧中，而相應(yīng)的 restore 方法則會(huì)從堆棧中彈出一個(gè)狀態(tài)，并將當(dāng)前畫面恢復(fù)至該狀態(tài)。繪畫狀態(tài)在 canvas 圖形變形操作中應(yīng)用極為廣泛，也非常重要，因?yàn)檎{(diào)用一個(gè) restore 方法遠(yuǎn)比手動(dòng)恢復(fù)先前狀態(tài)要簡(jiǎn)單許多，因而，一個(gè)較好的習(xí)慣是在做變形操作之前先保存 canvas 狀態(tài)。

二維繪圖的常用變形操作在 canvas 中都可到了很好的支持，包括平移（Translate），旋轉(zhuǎn)（Rotate），伸縮（Scale）等等。由于所有的變形操作都基于變形矩陣，因而開(kāi)發(fā)人員始終需要記住一點(diǎn)的就是，一旦沒(méi)有使用 save/restore 操作保持住原來(lái)的繪圖狀態(tài)，那么后續(xù)的繪圖操作，都會(huì)在當(dāng)前所應(yīng)用的變形狀態(tài)下完成。清單 3 使用平移和旋轉(zhuǎn)方法繪制了如下所示畫面。

<!DOCTYPE HTML>
<html>
<head>
  <script type="text/javascript">
        window.onload=function test(){
             var canvas = document.getElementById('canvas');
             if (canvas.getContext){
                 var ctx = canvas.getContext('2d');  // 獲取 2D 渲染上下文
                 ctx.clearRect(0,0,400,500)  ;// 清除以（0,0）為左上坐標(biāo)原點(diǎn)，300*200 矩形區(qū)域內(nèi)所有像素
                 ctx.fillStyle = '#00f';   // 設(shè)置矩形的填充屬性，#00f 代表藍(lán)色
                 ctx.strokeStyle = '#f00';  // 設(shè)置矩形的線條顏色，#f00 代表紅色
                 ctx.fillRect(50,50,150,80); // 使用 fillStyle 填充一個(gè) 150*80 大小的矩形
                 ctx.strokeRect(45,45, 160, 90);  // 以 strokeStype 屬性為邊的顏色繪制一個(gè)無(wú)填充矩形
            }
            var canvas2 = document.getElementById('canvas2');
              if (canvas2.getContext){
                 var ctx = canvas2.getContext('2d');
                 ctx.fillStyle = '#00f';
                 ctx.strokeStyle = '#f00';
                 ctx.beginPath();
                 ctx.arc(75,45,50,0,Math.PI, false);  // 繪制一條半圓弧線
                 ctx.closePath();    // 自動(dòng)繪制一條直線來(lái)關(guān)閉弧線。若不調(diào)用此方法，將僅僅顯示一條半圓弧
                 ctx.fill();      // 可以嘗試注釋掉 fill 或者 stroke 函數(shù)，觀察圖形的變化
                 ctx.stroke();
                 }
            var canvas3 = document.getElementById('canvas3');
                 if (canvas3.getContext){
                     var ctx = canvas3.getContext('2d');
                     ctx.translate(150,80);   // 將 canvas 的原點(diǎn)從 (0,0) 平移至（150,150）
                     for (i=1;i<=2;i++){        // 繪制內(nèi)外 2 層
                         if ((i % 2) == 1) {ctx.fillStyle = '#00f';}
                         else{ ctx.fillStyle = '#f00'; }
                         ctx.save();             // 保持開(kāi)始繪制每一層時(shí)的狀態(tài)一致
                         for (j=0;j<=i*6;j++){   // 每層生成點(diǎn)的數(shù)量
                         ctx.rotate(Math.PI/(3*i));  // 繞當(dāng)前原點(diǎn)將坐標(biāo)系順時(shí)針旋轉(zhuǎn) Math.Pi/(3*i) 度
                         ctx.beginPath();
                         ctx.arc(0,20*i,5,0,Math.PI*2,true);
                         ctx.fill();         // 使用 fillType 值填充每個(gè)點(diǎn)
                         }
                         ctx.restore();
                     }
                 }
        }
   </script>
</head>
<body>
<canvas id="canvas" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<canvas id="canvas2" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<canvas id="canvas3" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
</body>
</html>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

名稱欄目：使用HTML5canvan進(jìn)行Web繪圖-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)于：http://chinadenli.net/article24/jgsje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、服務(wù)器托管、網(wǎng)站設(shè)計(jì)公司、響應(yīng)式網(wǎng)站、電子商務(wù)、商城網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

使用HTML5canvan進(jìn)行Web繪圖-創(chuàng)新互聯(lián)