DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> HTML5 canvas基本繪圖之圖形組合
HTML5 canvas基本繪圖之圖形組合
編輯：HTML5教程     

<canvas></canvas>只是一個繪制圖形的容器，除了id、class、style等屬性外，還有height和width屬性。在<canvas>>元素上繪圖主要有三步：

1.獲取<canvas>元素對應的DOM對象，這是一個Canvas對象；
2.調用Canvas對象的getContext()方法，得到一個CanvasRenderingContext2D對象；
3.調用CanvasRenderingContext2D對象進行繪圖。

圖形組合：

•globalAlpha： 設置或返回繪圖的當前 alpha 或透明值

該方法主要是設置圖形的透明度，這裡就不具體介紹。

•globalCompositeOperation： 設置或返回新圖像如何繪制到已有的圖像上，該方法有以下屬性值：

下面是一個小示例，可以通過點擊改變組合效果：

XML/HTML Code復制內容到剪貼板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>圖形組合</title>  
  6.     <style type="text/css">  
  7.         #canvas{   
  8.             border: 1px solid #1C0EFA;   
  9.             display: block;   
  10.             margin: 20px auto;   
  11.         }   
  12.         #buttons{   
  13.             width: 1000px;   
  14.             margin: 5px auto;   
  15.             clear:both;   
  16.         }   
  17.         #buttons a{   
  18.             font-size: 18px;   
  19.             display: block;   
  20.             float: left;   
  21.             margin-left: 20px;   
  22.         }   
  23.     </style>  
  24. </head>  
  25. <body>  
  26.     <canvas id="canvas" width="1000" height="800">  
  27.             你的浏覽器還不支持canvas   
  28.     </canvas>  
  29.     <div id="buttons">  
  30.         <a href="#">source-over</a>  
  31.         <a href="#">source-atop</a>  
  32.         <a href="#">source-in</a>  
  33.         <a href="#">source-out</a>  
  34.         <a href="#">destination-over</a>  
  35.         <a href="#">destination-atop</a>  
  36.         <a href="#">destination-in</a>  
  37.         <a href="#">destination-out</a>  
  38.         <a href="#">lighter</a>  
  39.         <a href="#">copy</a>  
  40.         <a href="#">xor</a>  
  41.     </div>  
  42. </body>  
  43. <script type="text/javascript">  
  44.   
  45. window.onload = function(){   
  46.     draw("source-over");   
  47.   
  48.     var buttons = document.getElementById("buttons").getElementsByTagName("a");   
  49.     for (var i = 0; i < buttons.length; i++) {   
  50.         buttons[i].onclick = function(){   
  51.             draw(this.text);   
  52.             return false;   
  53.         };   
  54.     }   
  55. };   
  56.   
  57.     function draw(compositeStyle){   
  58.         var canvas = document.getElementById("canvas");   
  59.         var context = canvas.getContext("2d");   
  60.   
  61.         context.clearRect(0, 0, canvas.width, canvas.height);   
  62.   
  63.         //draw title   
  64.         context.font = "bold 40px Arial";   
  65.         context.textAlign = "center";   
  66.         context.textBasedline = "middle";   
  67.         context.fillStyle = "#150E0E";   
  68.         context.fillText("globalCompositeOperation = "+compositeStyle, canvas.width/2, 60);   
  69.   
  70.         //draw a rect   
  71.         context.fillStyle = "#F6082A";   
  72.         context.fillRect(300, 150, 500, 500);   
  73.   
  74.         //draw a triangle   
  75.         context.globalCompositeOperation = compositeStyle;   
  76.         context.fillStyle = "#1611F5";   
  77.         context.beginPath();   
  78.         context.moveTo(700, 250);   
  79.         context.lineTo(1000,750);   
  80.         context.lineTo(400, 750);   
  81.         context.closePath();   
  82.         context.fill();   
  83.     }   
  84.   
  85. </script>  
  86. </html>  

讀者可以點擊標簽來觀察不同的組合效果，效果如下：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。
HTML5教程
HTML5 Video標簽的屬性、方法和事件匯總介紹
 HTML5 Video標簽的屬性、方法和事件匯總介紹前段時間寫了一個基於html5 v
利用HTML5中的Canvas繪制一張笑臉的教程
今天，你將            學習一
HTML5的表單屬性簡介
HTML5 的新的表單屬性本章講解涉及 <form> 和 <input> 元

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
超贊的UC星座占卜H5是如何設計出來的？ HTML5多媒體組件的使用——第二部分：音頻 六大奇招帶你玩轉HTML5移動頁面動效 移動HTML 5前端性能優化指南 html5中valid、invalid、required的定義 實例講解使用HTML5 Canvas繪制陰影效果的方法 優秀的 HTML5 開發教程 HTML5 應用程序初級教程 html5中本地存儲替代cookie：qext.LocalStorage例子 使用canvas繪制貝塞爾曲線
熱門推薦
HTML5 開發者需要了解的技巧和工具匯總 Html5 語法與規則簡要概述 HTML5 入門：一個最簡單的HTML頁面（doctype、meta、Head、標簽的使用) HTML5 虛擬鍵盤出現擋住輸入框的解決辦法 HTML5 audio標簽使用js進行播放控制實例 HTML5制作酷炫音頻播放器插件圖文教程 HTML5+CSS3：3D展示商品信息示例 HTML5基礎，第3部分：HTML5 API的威力 Html5實現移動端、PC端 刮刮卡效果
大家都在看
JavaScript遞歸操作實例淺析 jQuery扁平化風格下拉框美化插件FancySelect使用指南 淺談Ajax相關及其優缺點 AJAX框架匯總 jQuery獲取cookie值及刪除cookie用法實例 Jquery獲得控件值的三種方法 6月分享ipad的app應用網站設計案例 Mozilla的JavaScript引擎__noSuchMethod__()方法
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved