【HTML5初探之繪制圖像（下）】看我canvas元素引領下一代web頁面

本文轉載自查看原文 2013-04-19 12:02 1648 HTML5&CSS3

接上一篇：【HTML5初探之繪制圖像（上）】看我canvas元素引領下一代web頁面

繪制漸變圖形

fillStyle除了指定顏色外，還可以指定填充對象。
繪制線性漸變時，需要用到LinearGradient對象，創建函數為：
createLinearGradient(xStart, yStart, xEnd, yEnd)；
xStart為漸變起始橫坐標
yStart為漸變起始縱坐標
xEnd為漸變結束橫坐標
yEnd為漸變結束縱坐標
通過該方法可以創建一個使用兩個坐標點的LinearGradient對象。
而后在通過addColorStop進行顏色設定：
addColorStop(offset, color)
offset為所設定顏色離開起始點的偏移量（0,1之間）
color為指定的顏色。
因為是漸變至少需要使用兩次addColorStop方法。
最后將fillStyle設定為LinearGradient對象執行填充變可繪制圖形了。

繪制漸變圖形

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         div
 7         {
 8             position: absolute;
 9             width: 1px;
10             height: 1px;
11             line-height: 1px;
12         }
13     </style>
14     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
15     <script type="text/javascript">
16         //x2 + y2 = r2;
17         $(document).ready(function () {
18             //先畫x，y
19             var canvas = $('#canvas')[0];
20             var ctx = canvas.getContext('2d');
21 
22             //#99d9ea
23             var g1 = ctx.createLinearGradient(0, 0, 0, 300);
24             g1.addColorStop(0, 'gray');
25             g1.addColorStop(1, '#99d9ea');
26             ctx.fillStyle = g1;
27             ctx.fillRect(0, 0, 400, 300);
28 
29         });
30     
31     </script>
32 </head>
33 <body>
34     <canvas id="canvas" width="400" height="300">
35     </canvas>
36 </body>
37 </html>

繪制徑向漸變

徑向漸變：沿着圓形的方向向外進行擴散漸變，比如沿着太陽半徑方向擴散出去的光暈。
createRediaGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)
radiusStart與radiusStart分別代表開始圓的半徑與結束圓的半徑

徑向漸變

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         //x2 + y2 = r2;
 8         $(document).ready(function () {
 9             //先畫x，y
10             var canvas = $('#canvas')[0];
11             var ctx = canvas.getContext('2d');
12 
13             //#99d9ea
14             var g1 = ctx.createRadialGradient(400, 0, 0, 400, 0, 400);
15             g1.addColorStop(0.1, 'gray');
16             g1.addColorStop(0.5, 'red');
17             g1.addColorStop(1, '#99d9ea');
18             ctx.fillStyle = g1;
19             ctx.fillRect(0, 0, 400, 300);
20 
21         });
22     
23     </script>
24 </head>
25 <body>
26     <canvas id="canvas" width="400" height="300">
27     </canvas>
28 </body>
29 </html>

繪制變形圖形

我們有時會遇到這么一個功能：旋轉相冊、放大照片，這里就介紹如何變形圖形：

translate(x, y)用於移動坐標軸原點，默認在左上角
scale(x, y)用於將圖形放大，xy分別是各自坐標軸放大的倍數
rotate(angle)用於旋轉圖形，angle為角度值

平移擴大旋轉圖形

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         //x2 + y2 = r2;
 8         $(document).ready(function () {
 9             //先畫x，y
10             var canvas = $('#canvas')[0];
11             var ctx = canvas.getContext('2d');
12             ctx.fillStyle = '#99d9ea';
13             ctx.fillRect(0, 0, 400, 300);
14 
15             ctx.fillStyle = 'red';
16             ctx.fillRect(10, 10, 50, 50);
17 
18             ctx.translate(60, 60);//原點平移
19             ctx.fillRect(0, 0, 50, 50);
20 
21             ctx.translate(60, 60); //原點平移
22             ctx.scale(1.5, 1.2); //放大
23             ctx.fillRect(0, 0, 50, 50);
24 
25             ctx.translate(60, 60); //原點平移
26             ctx.rotate(Math.PI / 10); //旋轉
27             ctx.fillRect(0, 0, 50, 50);
28 
29         });
30     
31     </script>
32 </head>
33 <body>
34     <canvas id="canvas" width="400" height="300">
35     </canvas>
36 </body>
37 </html>

矩陣變換

變換矩陣：專門用來實現圖形變形，與坐標配合使用，達到變形的目的。
transform(m11, m12, m21, m22, dz, dy)方法可修改變換矩陣
該方法使用一個新的變換矩陣與當前變換矩陣進行乘法運算
m參數用以修改使用這個方法后，繪制圖形的計算方法，以達到變形的目的；
dx與dy分別表示將坐標原點在各自坐標上移動對應單位
PS：這塊我也看得模模糊糊的，據說需要掌握矩陣相關知識，我這里簡述便是

這塊知識點，我沒有搞明白，暫時不描述了。

圖形組合

多個圖形之間可能發生重合。后出現的會遮蓋先出現的，有時我們想在上面做點操作，這里變提供了一個globalCompositeOperation屬性決定圖形組合方式。

該屬性文字很多，我這里直接上測試代碼了：

圖形組合

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         //x2 + y2 = r2;
 8         $(document).ready(function () {
 9             //先畫x，y
10             var canvas = $('#canvas')[0];
11             var ctx = canvas.getContext('2d');
12 
13             ctx.fillStyle = 'blue';
14             ctx.fillRect(10, 10, 60, 60);
15             ctx.globalCompositeOperation = 'xor';//lighter
16             ctx.beginPath();
17             ctx.fillStyle = 'red';
18             ctx.arc(60, 60, 30, 0, Math.PI * 2);
19             ctx.fill();
20 
21         });
22     
23     </script>
24 </head>
25 <body>
26     <canvas id="canvas" width="400" height="300">
27     </canvas>
28 </body>
29 </html>

繪制陰影

繪制陰影只需設定以下屬性：
shadowOffsetX
shadowOffsetY
shadowColor
shadowBlur 陰影模糊范圍

我是一個陰影

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         //x2 + y2 = r2;
 8         $(document).ready(function () {
 9             //先畫x，y
10             var canvas = $('#canvas')[0];
11             var ctx = canvas.getContext('2d');
12 
13             ctx.fillStyle = 'blue';
14             ctx.shadowOffsetX = 10;
15             ctx.shadowOffsetY = 10;
16             ctx.shadowColor = 'red';
17             ctx.shadowBlur = 7.5;
18 
19             ctx.fillRect(10, 10, 60, 60);
20 
21         });
22     
23     </script>
24 </head>
25 <body>
26     <canvas id="canvas" width="400" height="300">
27     </canvas>
28 </body>
29 </html>

使用圖像

繪制圖像有以下幾個方法：
drawImage(img, x, y)
drawImage(img, x, y, w, h)
drawImage(img, sx, sy, sw, sh, dz, dy, dw, dh)
前兩個函數都很好理解，第三個我第一眼是沒有看懂的：
sx\sy 分別代表源圖像被復制區域在畫布起始橫坐標縱坐標
sw\sh 表示被復制被復制區域的高寬（即做圖像局部復制）
dx\dy 表示被復制后的圖像在畫布上的位置
dw\dh 表示最后的高寬

第一個和第二個就是是否縮放的差距：

上一張我的果照

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(document).ready(function () {
 8             draw();
 9 
10         });
11         function draw() {
12             //獲取canvas對象
13             var canvas =  document.getElementById('canvas');
14             if (canvas == null) {
15                 return false;
16             }
17             var ctx = canvas.getContext('2d');
18             ctx.fillStyle = '#99d9ea';
19             ctx.fillRect(0, 0, 400, 300); //填充畫布結束
20 
21             var img = new Image();
22             img.src = 'yexiaochai.jpg';
23             img.onload = function () {
24                 ctx.drawImage(img, 10, 10, 400, 300);
25             };
26         }
27       
28 
29     </script>
30 </head>
31 <body>
32     <canvas id="canvas" width=400 height="300" >
33     </canvas>
34     <br />
35 </body>
36 </html>

指定高寬與不指定的區別。

第三個函數的使用，局部放大或者剪切的效果，只需要調整高寬縮放

局部剪切

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(document).ready(function () {
 8             draw();
 9 
10         });
11         function draw() {
12             //獲取canvas對象
13             var canvas =  document.getElementById('canvas');
14             if (canvas == null) {
15                 return false;
16             }
17             var ctx = canvas.getContext('2d');
18             ctx.fillStyle = '#99d9ea';
19             ctx.fillRect(0, 0, 1200, 600); //填充畫布結束
20 
21             var img = new Image();
22             img.src = 'yexiaochai.jpg';
23             img.onload = function () {
24                 ctx.drawImage(img, 0, 0);
25 
26                 ctx.drawImage(img, 200, 0, 160, 150, 400, 0, 160, 150);
27             };
28         }
29       
30 
31     </script>
32 </head>
33 <body>
34     <canvas id="canvas" width=1200 height="600" >
35     </canvas>
36     <br />
37 </body>
38 </html>

圖像剪切

剛剛那個剪切還是水的，接下來才是真正的剪切。。。

圓形裁剪

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(document).ready(function () {
 8             draw();
 9 
10         });
11         function draw() {
12             //獲取canvas對象
13             var canvas =  document.getElementById('canvas');
14             if (canvas == null) {
15                 return false;
16             }
17             var ctx = canvas.getContext('2d');
18             ctx.fillStyle = '#99d9ea';
19             ctx.fillRect(0, 0, 500, 500); //填充畫布結束
20 
21             var img = new Image();
22             img.src = 'yexiaochai.jpg';
23             img.onload = function () {
24                 ctx.beginPath();
25                 ctx.fillStyle = 'red';
26                 ctx.arc(250, 100, 100, 0, Math.PI * 2);
27                 ctx.fill();
28                 ctx.clip();
29                 ctx.drawImage(img, 0, 0);
30             };
31         }
32       
33 
34     </script>
35 </head>
36 <body>
37     <canvas id="canvas" width=500 height="500" >
38     </canvas>
39     <br />
40 </body>
41 </html>

像素處理

Canvas api可以獲取圖像的每一個像素，並得到像素的rgb，使用函數為：
getImageData(sx, sy, sw, sh)

簡單舉個例子吧：

View Code

 1  1 <!DOCTYPE html>
 2  2 <html xmlns="http://www.w3.org/1999/xhtml">
 3  3 <head>
 4  4     <title></title>
 5  5     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 6  6     <script type="text/javascript">
 7  7         $(document).ready(function () {
 8  8             draw();
 9  9 
10 10         });
11 11         function draw() {
12 12             //獲取canvas對象
13 13             var canvas =  document.getElementById('canvas');
14 14             if (canvas == null) {
15 15                 return false;
16 16             }
17 17             var ctx = canvas.getContext('2d');
18 18             ctx.fillStyle = '#99d9ea';
19 19             ctx.fillRect(0, 0, 500, 500); //填充畫布結束
20 20 
21 21             var img = new Image();
22 22             img.src = 'yexiaochai.jpg';
23 23             img.onload = function () {
24 24                 ctx.drawImage(img, 0, 0);
25 25                 var imgData = ctx.getImageData(0, 0, 200, 200);
26 26                 for (var i = 0, len = imgData.data.length; i < len; i += 4) {
27 27                     imgData.data[i + 0] = 255 - imgData.data[i + 0];
28 28                     imgData.data[i + 1] = 255 - imgData.data[i + 2];
29 29                     imgData.data[i + 2] = 255 - imgData.data[i + 1];
30 30                 }
31 31                 ctx.putImageData(imgData, 0, 0);
32 32             };
33 33         }
34 34       
35 35 
36 36     </script>
37 37 </head>
38 38 <body>
39 39     <canvas id="canvas" width=500 height="500" >
40 40     </canvas>
41 41     <br />
42 42 </body>
43 43 </html>

繪制文字

繪制帶陰影的文字

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(document).ready(function () {
 8             draw();
 9 
10         });
11         function draw() {
12             //獲取canvas對象
13             var canvas =  document.getElementById('canvas');
14             if (canvas == null) {
15                 return false;
16             }
17             var ctx = canvas.getContext('2d');
18             ctx.fillStyle = 'black';
19             ctx.font = 'bold 30px sans-serif';
20             ctx.shadowOffsetX = 4;
21             ctx.shadowOffsetY = 4;
22             ctx.shadowColor = 'gray';
23             ctx.shadowBlur = 7.5;
24             ctx.fillText('刀狂劍痴葉小釵', 10, 100);
25         }
26     </script>
27 </head>
28 <body>
29     <canvas id="canvas" width=500 height="500" >
30     </canvas>
31     <br />
32 </body>
33 </html>

保存與恢復狀態

我們在圖像剪切時有個問題，如果操作結束還想繼續繪制，又不取消裁剪范圍的話，急需要用到狀態保存與恢復了。
api提供save與restore完成相關功能
其分別用於保存與恢復圖形上下文的繪圖狀態。

文件保存

我們畫了很多圖形，但是該如何保存呢？

保存為本地文件

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(document).ready(function () {
 8             draw();
 9 
10         });
11         function draw() {
12             //獲取canvas對象
13             var canvas =  document.getElementById('canvas');
14             if (canvas == null) {
15                 return false;
16             }
17             var ctx = canvas.getContext('2d');
18             ctx.fillStyle = 'black';
19             ctx.font = 'bold 30px sans-serif';
20             ctx.shadowOffsetX = 4;
21             ctx.shadowOffsetY = 4;
22             ctx.shadowColor = 'gray';
23             ctx.shadowBlur = 7.5;
24             ctx.fillText('刀狂劍痴葉小釵', 10, 100);
25             window.location = canvas.toDataURL('image/jpeg');
26 
27         }
28     </script>
29 </head>
30 <body>
31     <canvas id="canvas" width=500 height="500" >
32     </canvas>
33     <br />
34 </body>
35 </html>

我只想說，你好黑啊。。。。

簡單的動畫制作

學到這里，我突然開光了，我突然知道我最近在干什么了！！！

動畫制作，使用這個東西可以動畫制作，換句話說，做游戲可以用它來了哇？？？如此一來我突然就感覺這個東西着實改變了前端啊！！！

所謂動畫就是不斷的檫除重繪的過程

移動的矩形

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(document).ready(function () {
 8             var canvas = document.getElementById('canvas');
 9             if (canvas == null) {
10                 return false;
11             }
12             var ctx = canvas.getContext('2d');
13 
14             draw(ctx, canvas);
15 
16         });
17         function draw(ctx, canvas) {
18             //獲取canvas對象
19 
20             ctx.fillStyle = 'black';
21             var width = canvas.width;
22             var height = canvas.height;
23             var step = 0;
24             setInterval(function () {
25                 ctx.clearRect(0, 0, width, height);
26                 ctx.fillStyle = 'red';
27                 ctx.fillRect(step, 0, 20, 20);
28                 step += 20;
29             }, 100);
30 
31 
32         }
33     </script>
34 </head>
35 <body>
36     <canvas id="canvas" width=500 height="500" >
37     </canvas>
38     <br />
39 </body>
40 </html>

該矩形會由左至右的運動。。。。

結語

就個人來說，Canvas這章估計是HTML5中比較枯燥的東西了，我學習過程中就不太提得起勁，完了里面很多圖形都是要有一定數學知識的。

然后這章的函數之多，完了我猜不要多久我又會忘記。

但是：這章類容應該是相當重要的，因為最后制作動畫時，我突然感覺是不是游戲就是需要他呢？？？於是馬上去查了下資料：

分享29款基於 HTML5 Canvas 開發的網頁游戲

於是老夫找到了此篇文章，才感覺到其真正用途，看來以后該知識點必須牢牢掌握好好運用啊！！！！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用html5 canvas繪制圖片 HTML5使用Canvas來繪制圖形 HTML5 Canvas 繪制圖片不顯示的問題再普及一次HTML5基礎，HTML5必須知道的那些事，HTML5掃盲。下一代Web開發的新特征 canvas繪制圖像輪廓效果關於canvas繪制圖像模糊問題 HTML5之Canvas繪圖——使用Canvas繪制圖形的基本教程 HTML5：繪制圖形 html5 繪制圖片 drawImage HTML5 -canvas拖拽、移動繪制圖片可操作移動，拖動

【HTML5初探之繪制圖像（下）】看我canvas元素引領下一代web頁面

導航

繪制漸變圖形

繪制徑向漸變

繪制變形圖形

矩陣變換

圖形組合

繪制陰影

使用圖像

第三個函數的使用，局部放大或者剪切的效果，只需要調整高寬縮放

圖像剪切

像素處理

繪制文字

保存與恢復狀態

文件保存

簡單的動畫制作

結語

免責聲明！