程序設計HTML5 Canvas API

2020-03-24 16:39:12

字體：大中小

來源：轉載

供稿：網友

復制代碼代碼如下:
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 >
復制代碼代碼如下:
//取得Canvas元素及其繪圖上下文var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d");
//用絕對坐標來創建一條路徑
context.beginPath();
context.moveTo(70, 140);
context.lineTo(140, 70);
//將這條線繪制到Canvas上
context.stroke();
變換可以通過變換(縮放、平移、旋轉)等達到和上面相同的效果。用變換的方式繪制對角線
復制代碼代碼如下:
//取得Canvas元素及其繪圖上下文
var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d");
//保存當前繪圖狀態
context.save();
//向右下方移動繪圖上下文
context.translate(70, 140);
//以原點為起點，繪制與前面相同的線段
context.beginPath();
context.moveTo(0, 0);
context.lineTo(70, -70);
context.stroke(); /p p context.restore();
路徑HTML5 Canvas API中的路徑代表你希望呈現的任何形狀。beginPath():不論開始繪制何種圖形，第一個需要調用的就是beginPath。這個簡單的函數不帶任何參數，它用來通知canvas將要開始繪制一個新的圖形了。moveTo(x,y):不繪制，將當前位置移動到新的目標坐標(x,y)。lineTo(x,y):不僅將當前位置移動到新的目標坐標(x,y)，而且在兩個坐標之間畫一條直線。closePath():這個函數行為和lineTo很像，唯一的差別在于closePath會將路徑的起始坐標自動作為目標坐標。它還會通知canvas當前繪制的圖形已經閉合或者形成了完全封閉區域，這對將來的填充和描邊都非常有用。繪制一個松樹地樹冠
復制代碼代碼如下:
function createCanopyPath(context) {
// Draw the tree canopy
context.beginPath(); /p p context.moveTo(-25, -50);
context.lineTo(-10, -80);
context.lineTo(-20, -80);
context.lineTo(-5, -110);
context.lineTo(-15, -110); /p p // 樹的頂點
context.lineTo(0, -140); /p p context.lineTo(15, -110);
context.lineTo(5, -110);
context.lineTo(20, -80);
context.lineTo(10, -80);
context.lineTo(25, -50);
// 連接起點，閉合路徑
context.closePath();
} /p p function drawTrails() {
var canvas = document.getElementById('diagonal');
var context = canvas.getContext('2d'); /p p context.save();
context.translate(130, 250); /p p // 創建表現樹冠的路徑
createCanopyPath(context); /p p // 繪制當前路徑
context.stroke();
context.restore();
} /p p 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(); /p p // 第一條曲線向右上方彎曲
context.moveTo(0, 0);
context.quadraticCurveTo(170, -50, 260, -190); /p p // 向右下方彎曲
context.quadraticCurveTo(310, -250, 410, -250); /p p // Draw the path in a wide brown stroke
context.strokeStyle = '#663300';
context.lineWidth = 20;
context.stroke(); /p p // Restore the previous canvas state
context.restore();
在Canvas中插入圖片必須等到圖片完全加載后才能對其進行操作。瀏覽器通常會在頁面腳本執行時異步加載圖片，如果試圖在圖片未完全加載之前就將其呈現到canvas上，那么 canvas將不會顯示任何圖片，因此，特別注意，在呈現之前，應確保圖片已加載完畢。
復制代碼代碼如下:
// 加載圖片
var bark = new Image();
bark.src = "bark.jpg"; /p p // 圖片加載完成后，再調用繪圖的函數
bark.onload = function () {
drawTrails();
}
顯示圖片：//用背景圖案填充，作為樹干的背景 context.drawImage(bark, -5, -50, 10, 50);漸變使用漸變需要三個步驟：(1)創建漸變對象(2)為漸變對象設置顏色，指明過渡方式(3)在context上為填充樣式或者描邊樣式設置漸變
復制代碼代碼如下:
// 創建用作樹干紋理的三階水平漸變
var trunkGradient = context.createLinearGradient(-5, -50, 5, -50); /p p // 樹干的左側邊緣是一般程度的棕色
trunkGradient.addColorStop(0, '#663300'); /p p // 樹干中間偏左的位置顏色要談一些
trunkGradient.addColorStop(0.4, '#996600'); /p p // 右側邊緣的顏色要深一些
trunkGradient.addColorStop(1, '#552200'); /p p // 使用漸變填充樹干
context.fillStyle = trunkGradient;
context.fillRect(-5, -50, 10, 50);
// 創建垂直漸變，以用樹冠在樹干上的投影
var canopyShadow = context.createLinearGradient(0, -50, 0, 0);
// 投影漸變的起點是透明度為50%的黑色
canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)');
// 方向垂直向下，漸變在很短的距離內迅速漸變到完全透明，這段長度之外
//的樹干上沒有投影
canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)'); /p p // 在樹干上填充投影漸變
context.fillStyle = canopyShadow;
context.fillRect(-5, -50, 10, 50);
背景圖
復制代碼代碼如下:
// 加載圖片
var gravel = new Image();
gravel.src = "gravel.jpg";
gravel.onload = function () {
drawTrails();
} /p p // 用背景圖替代棕色粗線條
context.strokeStyle = context.createPattern(gravel, 'repeat');
context.lineWidth = 20;
context.stroke();
context.createPattern的第二個參數是重復性標記，可以在表2-1中選擇合適的值。
縮放縮放函數context.scale(x,y)：x,y分別代表在x,y兩個維度的值。每個參數在canvas顯示圖像的時候，向其傳遞在本方向軸上圖像要放大(或縮小)的量。如果x值為2，就代表所繪制圖像中全部元素會變成兩倍寬，如果y值為0。5，繪制出來的圖像會變成之前的一半高。
復制代碼代碼如下:
// 在 X=130, Y=250 處繪制第一棵樹
context.save();
context.translate(130, 250);
drawTree(context);
context.restore(); /p p // 在 X=260, Y=500 處繪制第二棵樹
context.save();
context.translate(260, 500); /p p // 將第二棵樹的高寬放大到原來的2倍
context.scale(2, 2);
drawTree(context);
context.restore();
旋轉旋轉圖像
復制代碼代碼如下:
context.save();
//旋轉角度參數以弧度為單位
context.rotate(1.57);
context.drawImage(myImage, 0, 0, 100, 100); /p p context.restore();
一種變換的使用方法
復制代碼代碼如下:
// 保存當前狀態
context.save(); /p p // X值隨著Y值增加而增加，借助拉伸變換，
// 可以創建一棵用作陰影的傾斜的樹
// 應用了變換以后，所有坐標都與矩陣相乘
context.transform(1, 0,
-0.5, 1,
, 0); /p p // 在Y軸方向，將陰影高度變為原來的60%
context.scale(1, 0.6); /p p // 使用透明度為20%的黑色填充樹干
context.fillStyle = 'rgba(0, 0, 0, 0.2)';
context.fillRect(-5, -50, 10, 50); /p p // 使用已有的陰影效果重新繪制樹
createCanopyPath(context);
context.fill(); /p p // 恢復之前的canvas狀態
context.restore();
文本context.fillText(text,x,y,maxwidth):text文本內容，x,y指定文本位置,maxwidth是可選參數，限制文本位置。
context.strokeText(text,x,y,maxwidth):text文本內容，x,y指定文本位置,maxwidth是可選參數，限制文本位置。
復制代碼代碼如下:
// 在canvas上繪制文本
context.save(); /p p // 字號為60,字體為Impact
context.font = "60px impact"; /p p //填充顏色
context.fillStyle = '#996600';
//居中
context.textAlign = 'center'; /p p //繪制文本
context.fillText('Happy Trails!', 200, 60, 400);
context.restore();
陰影可以通過幾種全局context屬性來控制陰影

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

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML中ID與NAME的區別

下一篇：HTML5教程：Canvas標簽繪制徑向漸變圖形