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

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

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

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

開始：

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

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

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

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

簡單圖形繪制

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

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

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

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

例子及說明：

清單 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）為左上坐標原點，300*200 矩形區(qū)域內(nèi)所有像素 				 ctx.fillStyle = '#00f';   // 設置矩形的填充屬性，#00f 代表藍色 				 ctx.strokeStyle = '#f00';  // 設置矩形的線條顏色，#f00 代表紅色 				 ctx.fillRect(50,50,150,80); // 使用 fillStyle 填充一個 150*80 大小的矩形 				 ctx.strokeRect(45,45, 160, 90);  // 以 strokeStype 屬性為邊的顏色繪制一個無填充矩形 			}  		}    </script> </head> <body> <canvas id="canvas" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>  </body> </html>

繪制路徑

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

  • 定義路徑輪廓：

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

  • 繪制路徑

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

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.   <script type="text/javascript">
  5.         window.onload=function test(){
  6.              var canvas = document.getElementById('canvas');
  7.              if (canvas.getContext){
  8.                  var ctx = canvas.getContext('2d');  // 獲取 2D 渲染上下文
  9.                  ctx.clearRect(0,0,400,500)  ;// 清除以（0,0）為左上坐標原點，300*200 矩形區(qū)域內(nèi)所有像素
  10.                  ctx.fillStyle = '#00f';   // 設置矩形的填充屬性，#00f 代表藍色
  11.                  ctx.strokeStyle = '#f00';  // 設置矩形的線條顏色，#f00 代表紅色
  12.                  ctx.fillRect(50,50,150,80); // 使用 fillStyle 填充一個 150*80 大小的矩形
  13.                  ctx.strokeRect(45,45, 160, 90);  // 以 strokeStype 屬性為邊的顏色繪制一個無填充矩形
  14.             }
  15.             var canvas2 = document.getElementById('canvas2');
  16.               if (canvas2.getContext){
  17.                  var ctx = canvas2.getContext('2d');
  18.                  ctx.fillStyle = '#00f';
  19.                  ctx.strokeStyle = '#f00';
  20.                  ctx.beginPath();
  21.                  ctx.arc(75,45,50,0,Math.PI, false);  // 繪制一條半圓弧線
  22.                  ctx.closePath();    // 自動繪制一條直線來關閉弧線。若不調(diào)用此方法，將僅僅顯示一條半圓弧
  23.                  ctx.fill();      // 可以嘗試注釋掉 fill 或者 stroke 函數(shù)，觀察圖形的變化
  24.                  ctx.stroke();
  25.                  }
  26.         }
  27.    </script>
  28. </head>
  29. <body>
  30. <canvas id="canvas" style="border:1px solid #c3c3c3;">
  31. Your browser does not support the canvas element.
  32. </canvas>
  33. <canvas id="canvas2" style="border:1px solid #c3c3c3;">
  34. Your browser does not support the canvas element.
  35. </canvas>
  37. </body>
  38. </html>

二維變形

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

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

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

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

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

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.   <script type="text/javascript">
  5.         window.onload=function test(){
  6.              var canvas = document.getElementById('canvas');
  7.              if (canvas.getContext){
  8.                  var ctx = canvas.getContext('2d');  // 獲取 2D 渲染上下文
  9.                  ctx.clearRect(0,0,400,500)  ;// 清除以（0,0）為左上坐標原點，300*200 矩形區(qū)域內(nèi)所有像素
  10.                  ctx.fillStyle = '#00f';   // 設置矩形的填充屬性，#00f 代表藍色
  11.                  ctx.strokeStyle = '#f00';  // 設置矩形的線條顏色，#f00 代表紅色
  12.                  ctx.fillRect(50,50,150,80); // 使用 fillStyle 填充一個 150*80 大小的矩形
  13.                  ctx.strokeRect(45,45, 160, 90);  // 以 strokeStype 屬性為邊的顏色繪制一個無填充矩形
  14.             }
  15.             var canvas2 = document.getElementById('canvas2');
  16.               if (canvas2.getContext){
  17.                  var ctx = canvas2.getContext('2d');
  18.                  ctx.fillStyle = '#00f';
  19.                  ctx.strokeStyle = '#f00';
  20.                  ctx.beginPath();
  21.                  ctx.arc(75,45,50,0,Math.PI, false);  // 繪制一條半圓弧線
  22.                  ctx.closePath();    // 自動繪制一條直線來關閉弧線。若不調(diào)用此方法，將僅僅顯示一條半圓弧
  23.                  ctx.fill();      // 可以嘗試注釋掉 fill 或者 stroke 函數(shù)，觀察圖形的變化
  24.                  ctx.stroke();
  25.                  }
  26.             var canvas3 = document.getElementById('canvas3');
  27.                  if (canvas3.getContext){
  28.                      var ctx = canvas3.getContext('2d');
  29.                      ctx.translate(150,80);   // 將 canvas 的原點從 (0,0) 平移至（150,150）
  30.                      for (i=1;i<=2;i++){        // 繪制內(nèi)外 2 層
  31.                          if ((i % 2) == 1) {ctx.fillStyle = '#00f';}
  32.                          else{ ctx.fillStyle = '#f00'; }
  33.                          ctx.save();             // 保持開始繪制每一層時的狀態(tài)一致
  34.                          for (j=0;j<=i*6;j++){   // 每層生成點的數(shù)量
  35.                          ctx.rotate(Math.PI/(3*i));  // 繞當前原點將坐標系順時針旋轉(zhuǎn) Math.Pi/(3*i) 度
  36.                          ctx.beginPath();
  37.                          ctx.arc(0,20*i,5,0,Math.PI*2,true);
  38.                          ctx.fill();         // 使用 fillType 值填充每個點
  39.                          }
  40.                          ctx.restore();
  41.                      }
  42.                  }
  43.         }
  44.    </script>
  45. </head>
  46. <body>
  47. <canvas id="canvas" style="border:1px solid #c3c3c3;">
  48. Your browser does not support the canvas element.
  49. </canvas>
  50. <canvas id="canvas2" style="border:1px solid #c3c3c3;">
  51. Your browser does not support the canvas element.
  52. </canvas>
  53. <canvas id="canvas3" style="border:1px solid #c3c3c3;">
  54. Your browser does not support the canvas element.
  55. </canvas>
  57. </body>
  58. </html>

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

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

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

廣告

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

成都定制網(wǎng)站建設