HTML5 利用Canvas API 組合圖形

發布時間：2020-05-29 17:37:24 來源：網絡閱讀：2160 作者：charles_wang888 欄目：移動開發

在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> 
<h3>canvas：顯示組合圖形</h3> 
 
<!-- 創建一個下拉列表來讓用戶選擇按照什么方式來組合圖形 --> 
<!-- 一旦用戶做出了選擇，就會觸發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(); 
     
   
     
     
 }