摘要：

　　HTML5規(guī)范已經(jīng)完成了，互聯(lián)網(wǎng)上已經(jīng)有數(shù)不清的站點(diǎn)使用了HTML5。從現(xiàn)在開始研究HTML5，本文是自己在學(xué)習(xí)canvas過程中的記錄，以備后需。

歷史：

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

瀏覽器：

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

API：

?　　使用前，首先需要新建一個(gè)canvas網(wǎng)頁元素。如下：

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

?

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

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

參數(shù)：

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

返回值：

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

在畫圖之前先講下坐標(biāo)，每一個(gè)圖的原點(diǎn)坐標(biāo)(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); // 設(shè)置線的起點(diǎn)，坐標(biāo)為(20,20) 10 ctx.lineTo(100, 100); // 設(shè)置線的終點(diǎn)，坐標(biāo)為(100,100) 11 ctx.lineWidth = 5; // 設(shè)置線寬 12 ctx.strokeStyle = "#CC0000"; // 設(shè)置線的顏色 13 ctx.stroke(); // 進(jìn)行線的著色 14 } 15 </script>

注意：moveTo和lineTo方法可以多次使用。最后可以用closePath方法，自動(dòng)繪制一條當(dāng)前點(diǎn)到起點(diǎn)的直線，形成一個(gè)封閉圖形，也可以使用一次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); //三角型的頂點(diǎn) 11 ctx.lineTo(100,250); //三角型的頂點(diǎn) 12 ctx.lineTo(200,300); //三角型的頂點(diǎn) 13 ctx.closePath(); //可選步驟，關(guān)閉繪制的路徑 14 ctx.strokeStyle = "#CC0000"; //設(shè)置線的顏色 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'; //設(shè)置矩形的填充色 9 ctx.fillRect(50, 50, 200, 100); //fillRect(x, y, width, height),矩形左上角頂點(diǎn)的x坐標(biāo)、y坐標(biāo)，以及矩形的寬和高 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),矩形左上角頂點(diǎn)的x坐標(biāo)、y坐標(biāo)，以及矩形的寬和高 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),清除矩形左上角頂點(diǎn)的x坐標(biāo)、y坐標(biāo)，以及矩形的寬和高 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參數(shù)是圓心坐標(biāo)，radius是半徑，startAngle和endAngle則是扇形的起始角度和終止角度（以弧度表示），anticlockwise表示做圖時(shí)應(yīng)該逆時(shí)針畫（true）還是順時(shí)針畫（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 雅黑"; // 設(shè)置字體 9 ctx.textAlign = "left"; // 設(shè)置對齊方式 10 ctx.fillStyle = "#CC0000"; // 設(shè)置填充顏色 11 ctx.fillText("你好！", 10, 50); // fillText(string, x, y)文本內(nèi)容、起點(diǎn)的x坐標(biāo)、y坐標(biāo) 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是起點(diǎn)坐標(biāo)，x2和y2是終點(diǎn)坐標(biāo)。通過不同的坐標(biāo)值，可以生成從上至下、從左到右的漸變等等。 9 grd.addColorStop(0,"black");// addColorStop(stop,color)stop介于 0.0 與 1.0 之間的值，表示漸變中開始與結(jié)束之間的位置。color在結(jié)束位置顯示的 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坐標(biāo)，y0 漸變的開始圓的y坐標(biāo)，r0開始圓的半徑，x1漸變的結(jié)束圓的x坐標(biāo)，y1漸變的結(jié)束圓的y坐標(biāo)，r1結(jié)束圓的半徑 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 // 用漸變進(jìn)行填充 14 ctx.strokeStyle=gradient; 15 ctx.lineWidth=5; 16 ctx.strokeRect(20,20,150,100); 17 } 18 </script>

?

9、設(shè)置陰影

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; // 設(shè)置水平位移 9 ctx.shadowOffsetY = 10; // 設(shè)置垂直位移 10 ctx.shadowBlur = 5; // 設(shè)置模糊度 11 ctx.shadowColor = "#cc2111"; // 設(shè)置陰影顏色 12 ctx.fillStyle = "#CC0000"; 13 ctx.fillRect(10,10,200,100); 14 } 15 </script>

?

附錄：

?

顏色、樣式和陰影

屬性描述

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

方法描述

createLinearGradient()	創(chuàng)建線性漸變（用在畫布內(nèi)容上）
createPattern()	在指定的方向上重復(fù)指定的元素
createRadialGradient()	創(chuàng)建放射狀/環(huán)形的漸變（用在畫布內(nèi)容上）
addColorStop()	規(guī)定漸變對象中的顏色和停止位置

線條樣式

屬性描述

lineCap	設(shè)置或返回線條的結(jié)束端點(diǎn)樣式
lineJoin	設(shè)置或返回兩條線相交時(shí)，所創(chuàng)建的拐角類型
lineWidth	設(shè)置或返回當(dāng)前的線條寬度
miterLimit	設(shè)置或返回最大斜接長度

矩形

方法描述

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

路徑

方法描述

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

轉(zhuǎn)換

方法描述

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

文本

屬性描述

font	設(shè)置或返回文本內(nèi)容的當(dāng)前字體屬性
textAlign	設(shè)置或返回文本內(nèi)容的當(dāng)前對齊方式
textBaseline	設(shè)置或返回在繪制文本時(shí)使用的當(dāng)前文本基線

方法描述

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

圖像繪制

方法描述

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

像素操作

屬性描述

width	返回 ImageData 對象的寬度
height	返回 ImageData 對象的高度
data	返回一個(gè)對象，其包含指定的 ImageData 對象的圖像數(shù)據(jù)

方法描述

createImageData()	創(chuàng)建新的、空白的 ImageData 對象
getImageData()	返回 ImageData 對象，該對象為畫布上指定的矩形復(fù)制像素?cái)?shù)據(jù)
putImageData()	把圖像數(shù)據(jù)（從指定的 ImageData 對象）放回畫布上

合成

屬性描述

globalAlpha	設(shè)置或返回繪圖的當(dāng)前 alpha 或透明值
globalCompositeOperation	設(shè)置或返回新圖像如何繪制到已有的圖像上

其他

方法描述

save()	保存當(dāng)前環(huán)境的狀態(tài)
restore()	返回之前保存過的路徑狀態(tài)和屬性
createEvent()	?
getContext()	?
toDataURL()	?

轉(zhuǎn)載于:https://www.cnblogs.com/xiyangbaixue/p/4045603.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。