HTML5 利用Canvas API 組合圖形

最後更新：2013-12-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

在HTML5中有11種組合圖形的方式，只要把他們設定到context.globalCompositeOperation中就可以了，我這裡做了一個小例子來證明各種圖形組合方式的結果

HTML代碼很簡單，就2個控制項，一個是下拉式清單，讓使用者選擇組合方式，並且一旦使用者做出了選擇，就執行js函數draw(id），從而在第二個控制項canvas上根據使用者當前選擇的組合方式進行畫圖。第二個控制項就是一個canvas,用於顯示畫圖的內容。

 
  <!DOCTYPE html> 
  <head> 
  <meta charset="UTF-8"> 
  <title>HTML5 Combine Shape DEMO</title> 
  <script type="text/javascript" src="js/drawCombinedShape.js"></script> 
  </head> 
   
  <body></body> 
  <h2>canvas：顯示組合圖形</h2> 
   
  <!-- 建立一個下拉式清單來讓使用者選擇按照什麼方式來組合圖形 --> 
  <!-- 一旦使用者做出了選擇，就會觸發onchange處理函數，於是調用js函數，讓其在canvas組件上畫圖 --> 
  <select id="selectCombineMethod" onchange="draw('canvas')"> 
  <option >source-atop</option> 
  <option>source-in</option> 
  <option>source-out</option> 
  <option>source-over</option> 
  <option>destination-atop</option> 
  <option>destination-in</option> 
  <option>destination-out</option> 
  <option>destination-over</option> 
  <option>lighter</option> 
  <option>copy</option> 
  <option>xor</option> 
  </select> 
  <br><br> 
   
  <!-- 指定一個canvas元素用於顯示結果 --> 
  <canvas id="canvas" width="1000” height="1000"/> 
  <br><br>

js函數就是負責響應下拉式清單的onchange事件從而在canvas上畫圖，它先繪製原圖形(distination，在這裡是一個藍色正方形)，然後取得使用者選擇的組合方式，再根據此方式畫出新圖形source,在這裡是一個紅色的圓）：

 
  /** 
   *  This file is confidential by Charles.Wang 
   *  Copyright belongs to Charles.wang 
   *  You can make contact with Charles.Wang (charles_wang888@126.com) 
   */ 
    
    
   function draw(id){ 
       
      //得到使用者選擇的圖形組合選項： 
      var selectComponent=document.getElementById("selectCombineMethod"); 
      //取得使用者的選擇的索引 
      var selectedIndex =selectComponent.selectedIndex; 
      //得到使用者的選擇的值，也就是選擇的圖形組合策略 
      var selectedCombinedStrategy = selectComponent.options[selectedIndex].value; 
       
      //得到頁面上的畫布對象 
      var canvas=document.getElementById(id); 
      if(canvas ==null) 
      return false; 
       
      var context = canvas.getContext('2d'); 
      //畫原來的圖形，藍色正方形 
      context.fillStyle="blue"; 
      context.fillRect(40,40,60,60); 
       
      //將使用者選擇的圖形組合方式設定到context中 
      context.globalCompositeOperation=selectedCombinedStrategy; 
       
      //畫新圖形，是一個紅色的圓 
      //這時候，context會根據圖形的組合策略來決定如何繪製這2個圖形 
      context.beginPath(); 
      context.fillStyle="red"; 
      context.arc(40+60,40+60,30,0,Math.PI*2,false); 
      context.fill(); 
       
     
       
       
   }

實驗可以根據你使用者的選擇來顯示不同結果：

這裡的source是紅色的圓新圖形），distination是藍色正方形舊圖形）

source-atop=新圖形中新 and 老）+老圖形中!(新 and 老））

650) this.width=650;" border="0" alt="" src="http://www.bkjia.com/uploads/allimg/131228/1325511B8-0.png" />

source-in=新圖形中新 and 老）

650) this.width=650;" border="0" alt="" src="http://www.bkjia.com/uploads/allimg/131228/1325515225-1.png" />

source-out=新圖形中！新 and 老））

650) this.width=650;" border="0" alt="" src="http://www.bkjia.com/uploads/allimg/131228/13255113A-2.png" />

source-over預設值）=老圖形中！新 and 老））+新圖形中全部）

650) this.width=650;" border="0" alt="" src="http://www.bkjia.com/uploads/allimg/131228/1325512395-3.png" />

destination-atop=老圖形中新 and 老）+新圖形中！新 and 老））

650) this.width=650;" border="0" alt="" src="http://www.bkjia.com/uploads/allimg/131228/1325514058-4.png" />

destination-in=老圖形中新 and 老）

650) this.width=650;" border="0" alt="" src="http://www.bkjia.com/uploads/allimg/131228/132551DW-5.png" />

destination-out=老圖形中！新 and 老））

650) this.width=650;" border="0" alt="" src="http://www.bkjia.com/uploads/allimg/131228/132551K56-6.png" />

destination-over=老圖形中全部）+新圖形中!新 and 老）)

650) this.width=650;" border="0" alt="" src="http://www.bkjia.com/uploads/allimg/131228/1325515219-7.png" />

lighter=老圖形中!新 and 老））+ 新圖形中！新 and 老））+新 and 老色彩疊加）

650) this.width=650;" border="0" alt="" src="http://www.bkjia.com/uploads/allimg/131228/13255141M-8.png" />

copy=新圖形中全部）

650) this.width=650;" border="0" alt="" src="http://www.bkjia.com/uploads/allimg/131228/1325513194-9.png" />

xor對稱差）=老圖形中！新 and 老））+新圖形中!新 and 老））

650) this.width=650;" border="0" alt="" src="http://www.bkjia.com/uploads/allimg/131228/1325513Y9-10.png" />

本文出自 “平行線的凝聚” 部落格，請務必保留此出處http://supercharles888.blog.51cto.com/609344/854073

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More