摘要：

　　HTML5規范已經完成了，互聯網上已經有數不清的站點使用了HTML5。從現在開始研究HTML5，本文是自己在學習canvas過程中的記錄，以備后需。

歷史：

　　這個?HTML?元素是為了客戶端矢量圖形而設計的。它自己沒有行為，但卻把一個繪圖?API?展現給客戶端?JavaScript?以使腳本能夠把想繪制的東西都繪制到一塊畫布上。canvas標記由?Apple?在?Safari?1.3?Web?瀏覽器中引入。對?HTML?的這一根本擴展的原因在于，HTML?在?Safari?中的繪圖能力也為?Mac?OS?X?桌面的?Dashboard?組件所使用，并且?Apple?希望有一種方式在?Dashboard?中支持腳本化的圖形。

瀏覽器：

從圖中可以看出IE9+都支持canvas。

API：

?　　使用前，首先需要新建一個canvas網頁元素。如下：

1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器版本太低，不支持canvas！ 3 </canvas>

?

如果瀏覽器不支持canvas標簽，頁面上就會顯示‘您的瀏覽器版本太低，不支持canvas！’。每個canvas元素都有一個方法--getContext方法，返回一個用于在畫布上繪圖的環境。

1 var canvas = document.getElementById('myCanvas'); 2 canvas.getContext(contextID);

參數：

　　參數?contextID?指定了您想要在畫布上繪制的類型。當前唯一的合法值是 "2d"，它指定了二維繪圖，并且導致這個方法返回一個環境對象，該對象導出一個二維繪圖 API。

返回值：

　　返回一個表示用來繪制的環境類型的環境。其本意是要為不同的繪制類型（2 維、3 維）提供不同的環境。當前，唯一支持的是 "2d"，它返回一個 CanvasRenderingContext2D 對象，該對象實現了一個畫布所使用的大多數方法。

在畫圖之前先講下坐標，每一個圖的原點坐標(0,0)在圖的左上角，x軸正方向水平向右，y軸正方向水平向下。

Demo：

1、線

1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.beginPath(); // 開始 9 ctx.moveTo(20, 20); // 設置線的起點，坐標為(20,20) 10 ctx.lineTo(100, 100); // 設置線的終點，坐標為(100,100) 11 ctx.lineWidth = 5; // 設置線寬 12 ctx.strokeStyle = "#CC0000"; // 設置線的顏色 13 ctx.stroke(); // 進行線的著色 14 } 15 </script>

注意：moveTo和lineTo方法可以多次使用。最后可以用closePath方法，自動繪制一條當前點到起點的直線，形成一個封閉圖形，也可以使用一次lineto方法來封閉圖形。

2、三角形

1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.beginPath(); //開始 9 ctx.lineWidth=3; //邊框的寬度 10 ctx.moveTo(0,350); //三角型的頂點 11 ctx.lineTo(100,250); //三角型的頂點 12 ctx.lineTo(200,300); //三角型的頂點 13 ctx.closePath(); //可選步驟，關閉繪制的路徑 14 ctx.strokeStyle = "#CC0000"; //設置線的顏色 15 ctx.stroke(); //邊著色 16 } 17 </script>

3、正方型

1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.beginPath(); 9 ctx.moveTo(10,10); 10 ctx.lineTo(100,10); 11 ctx.lineTo(100,100); 12 ctx.lineTo(10,100); 13 ctx.lineTo(10,10); 14 ctx.strokeStyle="#CC0000"; 15 ctx.lineWidth=3; 16 ctx.stroke(); 17 } 18 </script>

4、矩形

1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.fillStyle = '#CC0000'; //設置矩形的填充色 9 ctx.fillRect(50, 50, 200, 100); //fillRect(x, y, width, height),矩形左上角頂點的x坐標、y坐標，以及矩形的寬和高 10 } 11 </script>

?

5、空心矩

1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.lineWidth = 5; 9 ctx.strokeStyle="#CC0000"; 10 ctx.strokeRect(10,10,200,100); //strokeRect(x, y, width, height),矩形左上角頂點的x坐標、y坐標，以及矩形的寬和高 11 ctx.stroke(); 12 } 13 </script>

?

清楚填充矩形一部分

1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.fillStyle = '#CC0000'; 9 ctx.fillRect(50, 50, 200, 100); 10 ctx.clearRect(100,50,50,50);//clearRect(x, y, width, height),清除矩形左上角頂點的x坐標、y坐標，以及矩形的寬和高 11 } 12 </script>

6、圓形

填充圓

1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.beginPath(); 9 ctx.arc(60, 60, 50, 0, Math.PI*2, true); //ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)x和y參數是圓心坐標，radius是半徑，startAngle和endAngle則是扇形的起始角度和終止角度（以弧度表示），anticlockwise表示做圖時應該逆時針畫（true）還是順時針畫（false） 10 ctx.fillStyle = "#CC0000"; 11 ctx.fill(); 12 } 13 </script>

?

空心圓

1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.beginPath(); 9 ctx.arc(60, 60, 50, 0, Math.PI*2, true); 10 ctx.lineWidth = 5; 11 ctx.strokeStyle = "#CC0000"; 12 ctx.stroke(); 13 } 14 </script>

?

7、繪制文本

1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.font = "Bold 20px 雅黑"; // 設置字體 9 ctx.textAlign = "left"; // 設置對齊方式 10 ctx.fillStyle = "#CC0000"; // 設置填充顏色 11 ctx.fillText("你好！", 10, 50); // fillText(string, x, y)文本內容、起點的x坐標、y坐標 12 ctx.strokeStyle = '#CC0000'; 13 ctx.strokeText("你好！", 10, 100); // 繪制空心字 14 } 15 </script>

注意：fillText和strokeText方法不支持文本斷行

?8、漸變色

1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 var grd=ctx.createLinearGradient(0,0,170,0);// createLinearGradient(x1, y1, x2, y2)x1和y1是起點坐標，x2和y2是終點坐標。通過不同的坐標值，可以生成從上至下、從左到右的漸變等等。 9 grd.addColorStop(0,"black");// addColorStop(stop,color)stop介于 0.0 與 1.0 之間的值，表示漸變中開始與結束之間的位置。color在結束位置顯示的 CSS 顏色值 10 grd.addColorStop("0.3","magenta"); 11 grd.addColorStop("0.5","blue"); 12 grd.addColorStop("0.6","green"); 13 grd.addColorStop("0.8","yellow"); 14 grd.addColorStop(1,"red"); 15 ctx.fillStyle=grd; 16 ctx.fillRect(20,20,150,100); 17 } 18 </script>

圓形漸

1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 var grd=ctx.createRadialGradient(75,50,5,90,60,100);//createRadialGradient(x0,y0,r0,x1,y1,r1);x0漸變的開始圓的x坐標，y0 漸變的開始圓的y坐標，r0開始圓的半徑，x1漸變的結束圓的x坐標，y1漸變的結束圓的y坐標，r1結束圓的半徑 9 grd.addColorStop(0,"red"); 10 grd.addColorStop(1,"white"); 11 // Fill with gradient 12 ctx.fillStyle=grd; 13 ctx.fillRect(10,10,150,100); 14 } 15 </script>

邊框漸變

1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 var gradient=ctx.createLinearGradient(0,0,170,0); 9 gradient.addColorStop("0","magenta"); 10 gradient.addColorStop("0.5","blue"); 11 gradient.addColorStop("1.0","red"); 12 13 // 用漸變進行填充 14 ctx.strokeStyle=gradient; 15 ctx.lineWidth=5; 16 ctx.strokeRect(20,20,150,100); 17 } 18 </script>

?

9、設置陰影

1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.shadowOffsetX = 10; // 設置水平位移 9 ctx.shadowOffsetY = 10; // 設置垂直位移 10 ctx.shadowBlur = 5; // 設置模糊度 11 ctx.shadowColor = "#cc2111"; // 設置陰影顏色 12 ctx.fillStyle = "#CC0000"; 13 ctx.fillRect(10,10,200,100); 14 } 15 </script>

?

附錄：

?

顏色、樣式和陰影

屬性描述

fillStyle	設置或返回用于填充繪畫的顏色、漸變或模式
strokeStyle	設置或返回用于筆觸的顏色、漸變或模式
shadowColor	設置或返回用于陰影的顏色
shadowBlur	設置或返回用于陰影的模糊級別
shadowOffsetX	設置或返回陰影距形狀的水平距離
shadowOffsetY	設置或返回陰影距形狀的垂直距離

方法描述

createLinearGradient()	創建線性漸變（用在畫布內容上）
createPattern()	在指定的方向上重復指定的元素
createRadialGradient()	創建放射狀/環形的漸變（用在畫布內容上）
addColorStop()	規定漸變對象中的顏色和停止位置

線條樣式

屬性描述

lineCap	設置或返回線條的結束端點樣式
lineJoin	設置或返回兩條線相交時，所創建的拐角類型
lineWidth	設置或返回當前的線條寬度
miterLimit	設置或返回最大斜接長度

矩形

方法描述

rect()	創建矩形
fillRect()	繪制“被填充”的矩形
strokeRect()	繪制矩形（無填充）
clearRect()	在給定的矩形內清除指定的像素

路徑

方法描述

fill()	填充當前繪圖（路徑）
stroke()	繪制已定義的路徑
beginPath()	起始一條路徑，或重置當前路徑
moveTo()	把路徑移動到畫布中的指定點，不創建線條
closePath()	創建從當前點回到起始點的路徑
lineTo()	添加一個新點，然后在畫布中創建從該點到最后指定點的線條
clip()	從原始畫布剪切任意形狀和尺寸的區域
quadraticCurveTo()	創建二次貝塞爾曲線
bezierCurveTo()	創建三次方貝塞爾曲線
arc()	創建弧/曲線（用于創建圓形或部分圓）
arcTo()	創建兩切線之間的弧/曲線
isPointInPath()	如果指定的點位于當前路徑中，則返回 true，否則返回 false

轉換

方法描述

scale()	縮放當前繪圖至更大或更小
rotate()	旋轉當前繪圖
translate()	重新映射畫布上的 (0,0) 位置
transform()	替換繪圖的當前轉換矩陣
setTransform()	將當前轉換重置為單位矩陣。然后運行 transform()

文本

屬性描述

font	設置或返回文本內容的當前字體屬性
textAlign	設置或返回文本內容的當前對齊方式
textBaseline	設置或返回在繪制文本時使用的當前文本基線

方法描述

fillText()	在畫布上繪制“被填充的”文本
strokeText()	在畫布上繪制文本（無填充）
measureText()	返回包含指定文本寬度的對象

圖像繪制

方法描述

drawImage()	向畫布上繪制圖像、畫布或視頻

像素操作

屬性描述

width	返回 ImageData 對象的寬度
height	返回 ImageData 對象的高度
data	返回一個對象，其包含指定的 ImageData 對象的圖像數據

方法描述

createImageData()	創建新的、空白的 ImageData 對象
getImageData()	返回 ImageData 對象，該對象為畫布上指定的矩形復制像素數據
putImageData()	把圖像數據（從指定的 ImageData 對象）放回畫布上

合成

屬性描述

globalAlpha	設置或返回繪圖的當前 alpha 或透明值
globalCompositeOperation	設置或返回新圖像如何繪制到已有的圖像上

其他

方法描述

save()	保存當前環境的狀態
restore()	返回之前保存過的路徑狀態和屬性
createEvent()	?
getContext()	?
toDataURL()	?

轉載于:https://www.cnblogs.com/xiyangbaixue/p/4045603.html

總結

以上是生活随笔為你收集整理的HTML5标签canvas制作平面图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。