程序設(shè)計(jì)HTML5 Canvas API_HTML5教程
推薦：突襲HTML5之Javascript API擴(kuò)展5—其他擴(kuò)展(應(yīng)用緩存/服務(wù)端消息/桌面通知)前面已經(jīng)總結(jié)了主要的API擴(kuò)展(應(yīng)用緩存/服務(wù)端消息/桌面通知),下面的幾個(gè)只有在特定的場(chǎng)合才能發(fā)揮它的潛質(zhì)，無(wú)一例外，IE均不支持,桌面通知目前只有Chrome支持,感興趣的朋友可以了解下，或許對(duì)你有所幫助
<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" style="border:1px solid blue;" width="200" height="200"/>//取得Canvas元素及其繪圖上下文var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d");
//用絕對(duì)坐標(biāo)來(lái)創(chuàng)建一條路徑
context.beginPath();
context.moveTo(70, 140);
context.lineTo(140, 70);
//將這條線繪制到Canvas上
context.stroke();
變換
可以通過(guò)變換(縮放、平移、旋轉(zhuǎn))等達(dá)到和上面相同的效果。
用變換的方式繪制對(duì)角線
//取得Canvas元素及其繪圖上下文
var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d");
//保存當(dāng)前繪圖狀態(tài)
context.save();
//向右下方移動(dòng)繪圖上下文
context.translate(70, 140);
//以原點(diǎn)為起點(diǎn)，繪制與前面相同的線段
context.beginPath();
context.moveTo(0, 0);
context.lineTo(70, -70);
context.stroke();</p> <p>context.restore();
路徑
HTML5 Canvas API中的路徑代表你希望呈現(xiàn)的任何形狀。
beginPath():不論開(kāi)始繪制何種圖形，第一個(gè)需要調(diào)用的就是beginPath。這個(gè)簡(jiǎn)單的函數(shù)不帶任何參數(shù)，它用來(lái)通知canvas將要開(kāi)始繪制一個(gè)新的圖形了。
moveTo(x,y):不繪制，將當(dāng)前位置移動(dòng)到新的目標(biāo)坐標(biāo)(x,y)。
lineTo(x,y):不僅將當(dāng)前位置移動(dòng)到新的目標(biāo)坐標(biāo)(x,y)，而且在兩個(gè)坐標(biāo)之間畫一條直線。
closePath():這個(gè)函數(shù)行為和lineTo很像，唯一的差別在于closePath會(huì)將路徑的起始坐標(biāo)自動(dòng)作為目標(biāo)坐標(biāo)。它還會(huì)通知canvas當(dāng)前繪制的圖形已經(jīng)閉合或者形成了完全封閉區(qū)域，這對(duì)將來(lái)的填充和描邊都非常有用。
繪制一個(gè)松樹地樹冠
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>// 樹的頂點(diǎn)
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);
// 連接起點(diǎn)，閉合路徑
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>// 創(chuàng)建表現(xiàn)樹冠的路徑
createCanopyPath(context);</p> <p>// 繪制當(dāng)前路徑
context.stroke();
context.restore();
}</p> <p>window.addEventListener("load", drawTrails, true);
描邊樣式
通過(guò)描邊模式，可以讓樹冠看起來(lái)更加真實(shí)。
//加寬線條
context.lineWidth = 4;
//平滑路徑的接合點(diǎn)
context.lineJoin = 'round';
//顏色
context.strokeStyle = '#663300';
// 繪制當(dāng)前路徑
context.stroke();
填充樣式
繪制矩形
我們給樹增加樹干
繪制曲線
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中插入圖片
必須等到圖片完全加載后才能對(duì)其進(jìn)行操作。瀏覽器通常會(huì)在頁(yè)面腳本執(zhí)行時(shí)異步加載圖片，如果試圖在圖片未完全加載之前就將其呈現(xiàn)到canvas上，那么 canvas將不會(huì)顯示任何圖片，因此，特別注意，在呈現(xiàn)之前，應(yīng)確保圖片已加載完畢。
// 加載圖片
var bark = new Image();
bark.src = "bark.jpg";</p> <p>// 圖片加載完成后，再調(diào)用繪圖的函數(shù)
bark.onload = function () {
drawTrails();
}
顯示圖片：
漸變
使用漸變需要三個(gè)步驟：
(1)創(chuàng)建漸變對(duì)象
(2)為漸變對(duì)象設(shè)置顏色，指明過(guò)渡方式
(3)在context上為填充樣式或者描邊樣式設(shè)置漸變
// 創(chuàng)建用作樹干紋理的三階水平漸變
var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);</p> <p>// 樹干的左側(cè)邊緣是一般程度的棕色
trunkGradient.addColorStop(0, '#663300');</p> <p>// 樹干中間偏左的位置顏色要談一些
trunkGradient.addColorStop(0.4, '#996600');</p> <p>// 右側(cè)邊緣的顏色要深一些
trunkGradient.addColorStop(1, '#552200');</p> <p>// 使用漸變填充樹干
context.fillStyle = trunkGradient;
context.fillRect(-5, -50, 10, 50);
// 創(chuàng)建垂直漸變，以用樹冠在樹干上的投影
var canopyShadow = context.createLinearGradient(0, -50, 0, 0);
// 投影漸變的起點(diǎn)是透明度為50%的黑色
canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)');
// 方向垂直向下，漸變?cè)诤芏痰木嚯x內(nèi)迅速漸變到完全透明，這段長(zhǎng)度之外
//的樹干上沒(méi)有投影
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的第二個(gè)參數(shù)是重復(fù)性標(biāo)記，可以在表2-1中選擇合適的值。
| 平鋪方式 | 意義 |
| repeat | (默認(rèn)值)圖片會(huì)在兩個(gè)方向平鋪 |
| repeat-x | 橫向平鋪 |
| repeat-y | 縱向平鋪 |
| no-repeat | 圖片只顯示一次，不平鋪 |
縮放
縮放函數(shù)context.scale(x,y)：x,y分別代表在x,y兩個(gè)維度的值。每個(gè)參數(shù)在canvas顯示圖像的時(shí)候，向其傳遞在本方向軸上圖像要放大(或縮小)的量。如果x值為2，就代表所繪制圖像中全部元素會(huì)變成兩倍寬，如果y值為0。5，繪制出來(lái)的圖像會(huì)變成之前的一半高。
// 在 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>// 將第二棵樹的高寬放大到原來(lái)的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);</p> <p>context.restore();
一種變換的使用方法
// 保存當(dāng)前狀態(tài)
context.save();</p> <p>// X值隨著Y值增加而增加，借助拉伸變換，
// 可以創(chuàng)建一棵用作陰影的傾斜的樹
// 應(yīng)用了變換以后，所有坐標(biāo)都與矩陣相乘
context.transform(1, 0,
-0.5, 1,
, 0);</p> <p>// 在Y軸方向，將陰影高度變?yōu)樵瓉?lái)的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>// 恢復(fù)之前的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();</p> <p>// 字號(hào)為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();
陰影
可以通過(guò)幾種全局context屬性來(lái)控制陰影
| 屬性 | 值 | 備注 |
| shadowColor | 任何CSS中的顏色值 | 可以使用透明度（alpha） |
| shadowOffsetX | 像素值 | 值為正數(shù)，向右移動(dòng)陰影;為負(fù)數(shù)，向左移動(dòng)陰影 |
| shadowOffsetY | 像素值 | 值為正數(shù)，向下移動(dòng)陰影;為負(fù)數(shù)，向上移動(dòng)陰影 |
| shadowBlur | 高斯模糊值 | 值越大，陰影邊緣越模糊 |
// 顏色黑色，20%透明度
context.shadowColor = 'rgba(0, 0, 0, 0.2)';</p> <p>// 向右移動(dòng)15px,向左移動(dòng)10px
context.shadowOffsetX = 15;
context.shadowOffsetY = -10;</p> <p>// 輕微模糊陰影
context.shadowBlur = 2;
像素?cái)?shù)據(jù)
context.getImageData(sx, sy, sw, sh)：sx,xy確定一個(gè)點(diǎn)，sw:寬度，sh:高度。
這個(gè)函數(shù)返回三個(gè)屬性：width 每行有多少個(gè)像素 height 每列有多少個(gè)像素
data 一堆數(shù)組，存有從canvas獲取的每個(gè)像素的RGBA值（值紅、綠、藍(lán)和透明度）。
context.putImageData(imagedata,dx,dy)：允許開(kāi)發(fā)人員傳入一組圖像數(shù)據(jù)，dx,dy用來(lái)指定偏移量，如果使用，則該函數(shù)就會(huì)跳到指定的canvas位置去更新
顯示傳進(jìn)來(lái)的像素?cái)?shù)據(jù)。
canvas.toDataUrl：可以通過(guò)編程獲取canvas上當(dāng)前呈現(xiàn)的數(shù)據(jù)，獲得的數(shù)據(jù)以文本格式保存，瀏覽器能將其解析成圖像。
分享：純html5+css3下拉導(dǎo)航菜單實(shí)現(xiàn)代碼下拉導(dǎo)航在瀏覽網(wǎng)頁(yè)時(shí)經(jīng)常會(huì)遇見(jiàn)到，記得以前都是使用js實(shí)現(xiàn)的吧，不過(guò)本文接下來(lái)要介紹的是采用css3+html5實(shí)現(xiàn)，感興趣的你可不要錯(cuò)過(guò)了哈，希望看完對(duì)你學(xué)習(xí)css3有所幫助
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開(kāi)發(fā)的過(guò)程介紹
- HTML5 對(duì)各個(gè)標(biāo)簽的定義與規(guī)定：body的介紹
- 關(guān)于HTML5的安全問(wèn)題開(kāi)發(fā)人員需要牢記的
- 關(guān)于HTML5的22個(gè)初級(jí)技巧(圖文教程)
- 開(kāi)發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫(kù)的SQL語(yǔ)句的使用方法
- HTML5實(shí)踐-圖片設(shè)置成灰度圖
- HTML5安全介紹之內(nèi)容安全策略（CSP）簡(jiǎn)介
- HTML5 Web存儲(chǔ)方式的localStorage和sessionStorage進(jìn)行數(shù)據(jù)本地存儲(chǔ)案例應(yīng)用
- Bootstrap 學(xué)習(xí)分享
- input元素的url類型和email類型簡(jiǎn)介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- HTML5之SVG 2D入門2—圖形繪制(基本形狀)介紹及使用
- HTML5 新舊語(yǔ)法標(biāo)記對(duì)我們有什么好處
- HTML5 Web Database 數(shù)據(jù)庫(kù)的SQL語(yǔ)句的使用方法
- 關(guān)于HTML5的安全問(wèn)題開(kāi)發(fā)人員需要牢記的
- 幾個(gè)解決兼容IE6\7\8不支持html5標(biāo)簽的幾個(gè)方法
- html5-Canvas可以在web中繪制各種圖形
- 突襲HTML5之Javascript API擴(kuò)展1—Web Worker異步執(zhí)行及相關(guān)概述
- HTML5之SVG 2D入門10—濾鏡的定義及使用
- html5 button autofocus 屬性介紹及應(yīng)用
- 突襲HTML5之Javascript API擴(kuò)展4—拖拽(Drag/Drop)概述
- 相關(guān)鏈接：
- 教程說(shuō)明：
HTML5教程-程序設(shè)計(jì)HTML5 Canvas API
。