程序設計HTML5 Canvas API

字號：小 中 大

本文小編為大家介紹關于程序設計程序設計HTML5 Canvas API ，有需求的朋友可以參考一下。
 代碼如下:
 <script type="text/javascript">
 try
 {
 document.createElement("Canvas").getContext("2d");
 document.getElementById("support").innerHTML = "OK";
 }
 catch (e)
 {
 document.getElementById("support").innerHTML = e.message;
 }
 </script>
 加入Canvas
 <canvas id="diagonal" width="200" height="200"/>
 代碼如下:
 //取得Canvas元素及其繪圖上下文var canvas = document.getElementById("diagonal");
 var context = canvas.getContext("2d");
 //用絕對坐標來創(chuàng)建一條路徑
 context.beginPath();
 context.moveTo(70, 140);
 context.lineTo(140, 70);
 //將這條線繪制到Canvas上
 context.stroke();
 變換
 可以通過變換(縮放、平移、旋轉(zhuǎn))等達到和上面相同的效果。
 用變換的方式繪制對角線
 代碼如下:
 //取得Canvas元素及其繪圖上下文
 var canvas = document.getElementById("diagonal");
 var context = canvas.getContext("2d");
 //保存當前繪圖狀態(tài)
 context.save();
 //向右下方移動繪圖上下文
 context.translate(70, 140);
 //以原點為起點，繪制與前面相同的線段
 context.beginPath();
 context.moveTo(0, 0);
 context.lineTo(70, -70);
 context.stroke(); context.restore();
 路徑
 HTML5 Canvas API中的路徑代表你希望呈現(xiàn)的任何形狀。
 beginPath():不論開始繪制何種圖形，第一個需要調(diào)用的就是beginPath。這個簡單的函數(shù)不帶任何參數(shù)，它用來通知canvas將要開始繪制一個新的圖形了。
 moveTo(x,y):不繪制，將當前位置移動到新的目標坐標(x,y)。
 lineTo(x,y):不僅將當前位置移動到新的目標坐標(x,y)，而且在兩個坐標之間畫一條直線。
 closePath():這個函數(shù)行為和lineTo很像，唯一的差別在于closePath會將路徑的起始坐標自動作為目標坐標。它還會通知canvas當前繪制的圖形已經(jīng)閉合或者形成了完全封閉區(qū)域，這對將來的填充和描邊都非常有用。
 繪制一個松樹地樹冠
 代碼如下:
 function createCanopyPath(context) {
 // Draw the tree canopy
 context.beginPath(); context.moveTo(-25, -50);
 context.lineTo(-10, -80);
 context.lineTo(-20, -80);
 context.lineTo(-5, -110);
 context.lineTo(-15, -110); // 樹的頂點
 context.lineTo(0, -140); context.lineTo(15, -110);
 context.lineTo(5, -110);
 context.lineTo(20, -80);
 context.lineTo(10, -80);
 context.lineTo(25, -50);
 // 連接起點，閉合路徑
 context.closePath();
 } function drawTrails() {
 var canvas = document.getElementById('diagonal');
 var context = canvas.getContext('2d'); context.save();
 context.translate(130, 250); // 創(chuàng)建表現(xiàn)樹冠的路徑
 createCanopyPath(context); // 繪制當前路徑
 context.stroke();
 context.restore();
 } window.addEventListener("load", drawTrails, true);
 描邊樣式
 通過描邊模式，可以讓樹冠看起來更加真實。
 代碼如下:
 //加寬線條
 context.lineWidth = 4;
 //平滑路徑的接合點
 context.lineJoin = 'round';
 //顏色
 context.strokeStyle = '#663300';
 // 繪制當前路徑
 context.stroke();
 填充樣式
 context.fillStyle = "#339900"; context.fill();
 繪制矩形
 我們給樹增加樹干
 context.fillStyle = '#663300'; context.fillRect(-5, -50, 10, 50);
 繪制曲線
 代碼如下:
 context.save();
 context.translate(-10, 350);
 context.beginPath(); // 第一條曲線向右上方彎曲
 context.moveTo(0, 0);
 context.quadraticCurveTo(170, -50, 260, -190); // 向右下方彎曲
 context.quadraticCurveTo(310, -250, 410, -250); // Draw the path in a wide brown stroke
 context.strokeStyle = '#663300';
 context.lineWidth = 20;
 context.stroke(); // Restore the previous canvas state
 context.restore();
 在Canvas中插入圖片
 必須等到圖片完全加載后才能對其進行操作。瀏覽器通常會在頁面腳本執(zhí)行時異步加載圖片，如果試圖在圖片未完全加載之前就將其呈現(xiàn)到canvas上，那么 canvas將不會顯示任何圖片，因此，特別注意，在呈現(xiàn)之前，應確保圖片已加載完畢。
 代碼如下:
 // 加載圖片
 var bark = new Image();
 bark.src = "bark.jpg"; // 圖片加載完成后，再調(diào)用繪圖的函數(shù)
 bark.onload = function () {
 drawTrails();
 }
 顯示圖片：
 //用背景圖案填充，作為樹干的背景 context.drawImage(bark, -5, -50, 10, 50);
 漸變
 使用漸變需要三個步驟：
 (1)創(chuàng)建漸變對象
 (2)為漸變對象設置顏色，指明過渡方式
 (3)在context上為填充樣式或者描邊樣式設置漸變
 代碼如下:
 // 創(chuàng)建用作樹干紋理的三階水平漸變
 var trunkGradient = context.createLinearGradient(-5, -50, 5, -50); // 樹干的左側邊緣是一般程度的棕色
 trunkGradient.addColorStop(0, '#663300'); // 樹干中間偏左的位置顏色要談一些
 trunkGradient.addColorStop(0.4, '#996600'); // 右側邊緣的顏色要深一些
 trunkGradient.addColorStop(1, '#552200'); // 使用漸變填充樹干
 context.fillStyle = trunkGradient;
 context.fillRect(-5, -50, 10, 50);
 // 創(chuàng)建垂直漸變，以用樹冠在樹干上的投影
 var canopyShadow = context.createLinearGradient(0, -50, 0, 0);
 // 投影漸變的起點是透明度為50%的黑色
 canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)');
 // 方向垂直向下，漸變在很短的距離內(nèi)迅速漸變到完全透明，這段長度之外
 //的樹干上沒有投影
 canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)'); // 在樹干上填充投影漸變
 context.fillStyle = canopyShadow;
 context.fillRect(-5, -50, 10, 50);
 背景圖
 代碼如下:
 // 加載圖片
 var gravel = new Image();
 gravel.src = "gravel.jpg";
 gravel.onload = function () {
 drawTrails();
 } // 用背景圖替代棕色粗線條
 context.strokeStyle = context.createPattern(gravel, 'repeat');
 context.lineWidth = 20;
 context.stroke();
 context.createPattern的第二個參數(shù)是重復性標記，可以在表2-1中選擇合適的值。

平鋪方式	意義
repeat	(默認值)圖片會在兩個方向平鋪
repeat-x	橫向平鋪
repeat-y	縱向平鋪
no-repeat	圖片只顯示一次，不平鋪

縮放
 縮放函數(shù)context.scale(x,y)：x,y分別代表在x,y兩個維度的值。每個參數(shù)在canvas顯示圖像的時候，向其傳遞在本方向軸上圖像要放大(或縮小)的量。如果x值為2，就代表所繪制圖像中全部元素會變成兩倍寬，如果y值為0。5，繪制出來的圖像會變成之前的一半高。
 代碼如下:
 // 在 X=130, Y=250 處繪制第一棵樹
 context.save();
 context.translate(130, 250);
 drawTree(context);
 context.restore(); // 在 X=260, Y=500 處繪制第二棵樹
 context.save();
 context.translate(260, 500); // 將第二棵樹的高寬放大到原來的2倍
 context.scale(2, 2);
 drawTree(context);
 context.restore();
 旋轉(zhuǎn)
 旋轉(zhuǎn)圖像
 代碼如下:
 context.save();
 //旋轉(zhuǎn)角度參數(shù)以弧度為單位
 context.rotate(1.57);
 context.drawImage(myImage, 0, 0, 100, 100); context.restore();
 一種變換的使用方法
 代碼如下:
 // 保存當前狀態(tài)
 context.save(); // X值隨著Y值增加而增加，借助拉伸變換，
 // 可以創(chuàng)建一棵用作陰影的傾斜的樹
 // 應用了變換以后，所有坐標都與矩陣相乘
 context.transform(1, 0,
 -0.5, 1,
 , 0); // 在Y軸方向，將陰影高度變?yōu)樵瓉淼?0%
 context.scale(1, 0.6); // 使用透明度為20%的黑色填充樹干
 context.fillStyle = 'rgba(0, 0, 0, 0.2)';
 context.fillRect(-5, -50, 10, 50); // 使用已有的陰影效果重新繪制樹
 createCanopyPath(context);
 context.fill(); // 恢復之前的canvas狀態(tài)
 context.restore();
 文本
 context.fillText(text,x,y,maxwidth):text文本內(nèi)容，x,y指定文本位置,maxwidth是可選參數(shù)，限制文本位置。
 context.strokeText(text,x,y,maxwidth):text文本內(nèi)容，x,y指定文本位置,maxwidth是可選參數(shù)，限制文本位置。
 代碼如下:
 // 在canvas上繪制文本
 context.save(); // 字號為60,字體為Impact
 context.font = "60px impact"; //填充顏色
 context.fillStyle = '#996600';
 //居中
 context.textAlign = 'center'; //繪制文本
 context.fillText('Happy Trails!', 200, 60, 400);
 context.restore();
 陰影
 可以通過幾種全局context屬性來控制陰影

屬性	值	備注
shadowColor	任何CSS中的顏色值	可以使用透明度（alpha）
shadowOffsetX	像素值	值為正數(shù)，向右移動陰影;為負數(shù)，向左移動陰影
shadowOffsetY	像素值	值為正數(shù)，向下移動陰影;為負數(shù)，向上移動陰影
shadowBlur	高斯模糊值	值越大，陰影邊緣越模糊

代碼如下:
 // 顏色黑色，20%透明度
 context.shadowColor = 'rgba(0, 0, 0, 0.2)'; // 向右移動15px,向左移動10px
 context.shadowOffsetX = 15;
 context.shadowOffsetY = -10; // 輕微模糊陰影
 context.shadowBlur = 2;
 像素數(shù)據(jù)
 context.getImageData(sx, sy, sw, sh)：sx,xy確定一個點，sw:寬度，sh:高度。
 這個函數(shù)返回三個屬性：width 每行有多少個像素 height 每列有多少個像素
 data 一堆數(shù)組，存有從canvas獲取的每個像素的RGBA值（值紅、綠、藍和透明度）。
 context.putImageData(imagedata,dx,dy)：允許開發(fā)人員傳入一組圖像數(shù)據(jù)，dx,dy用來指定偏移量，如果使用，則該函數(shù)就會跳到指定的canvas位置去更新
 顯示傳進來的像素數(shù)據(jù)。
 canvas.toDataUrl：可以通過編程獲取canvas上當前呈現(xiàn)的數(shù)據(jù)，獲得的數(shù)據(jù)以文本格式保存，瀏覽器能將其解析成圖像。

程序設計HTML5 Canvas API

字號： 小 中 大

字號：小中大