當前位置 : IT培訓網 > Web前端 > Web教程 > 如何用HTML5 Canvas定義圖形

如何用HTML5 Canvas定義圖形

時間:2016-12-06 15:09:58??來源:web前端培訓網??作者:IT培訓網??已有:名學員訪問該課程
漂亮的頁面是有多種元素組成的,而這些元素需要我們認真學習及熟練應用之后才可以展現給用戶,如果你在學習網頁設計或者已經是網頁設計的一員了,那么趕緊加入我們吧,學習更多html5知識,做漂亮的網頁盡在IT培訓網

在網頁中插入圖片很容易,可用代碼來制作圖片你會嗎,也許你不信,如果你使用了HTML5,這些圖片就可以輕松的解決了,你想來學學嗎,趕緊隨著IT培訓網小編一起來學習下吧!

HTML5 Canvas


<canvas> 標簽定義圖形,比如圖表和其他圖像,您必須使用腳本來繪制圖形。

在畫布上(Canvas)畫一個紅色矩形,漸變矩形,彩色矩形,和一些彩色的文字。

如何用HTML5 Canvas定義圖形_www.oalvodamoda.com


什么是 Canvas?

HTML5 <canvas> 元素用于圖形的繪制,通過腳本 (通常是JavaScript)來完成.

<canvas> 標簽只是圖形容器,您必須使用腳本來繪制圖形。

你可以通過多種方法使用Canva繪制路徑,盒、圓、字符以及添加圖像。


瀏覽器支持

表格中的數字表示支持 <canvas> 元素的第一個瀏覽器版本號。

如何用HTML5 Canvas定義圖形_www.oalvodamoda.com


創建一個畫布(Canvas)

一個畫布在網頁中是一個矩形框,通過 <canvas> 元素來繪制.

注意: 默認情況下 <canvas> 元素沒有邊框和內容。

<canvas>簡單實例如下:

<canvas id="myCanvas" width="200" height="100"></canvas>

注意: 標簽通常需要指定一個id屬性 (腳本中經常引用), width 和 height 屬性定義的畫布的大小.

提示:你可以在HTML頁面中使用多個 <canvas> 元素.

使用 style 屬性來添加邊框:

實例

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">

您的瀏覽器不支持 HTML5 canvas 標簽。

</canvas>

</body>

</html>

運行結果:

 


使用 JavaScript 來繪制圖像

canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成:

 

實例

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">

您的瀏覽器不支持 HTML5 canvas 標簽。

</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

</script>

</body>

</html>

運行結果:

如何用HTML5 Canvas定義圖形_www.oalvodamoda.com

實例解析:

首先,找到 <canvas> 元素:

var c=document.getElementById("myCanvas");

然后,創建 context 對象:

var ctx=c.getContext("2d");

getContext("2d") 對象是內建的 HTML5 對象,擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

下面的兩行代碼繪制一個紅色的矩形:

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

設置fillStyle屬性可以是CSS顏色,漸變,或圖案。fillStyle 默認設置是#000000(黑色)。

fillRect(x,y,width,height) 方法定義了矩形當前的填充方式。


Canvas 坐標

canvas 是一個二維網格。

canvas 的左上角坐標為 (0,0)

上面的 fillRect 方法擁有參數 (0,0,150,75)。

意思是:在畫布上繪制 150x75 的矩形,從左上角開始 (0,0)。

坐標實例

如下圖所示,畫布的 X 和 Y 坐標用于在畫布上對繪畫進行定位。鼠標移動的矩形框上,顯示定位坐標。

如何用HTML5 Canvas定義圖形_www.oalvodamoda.com


Canvas - 路徑

在Canvas上畫線,我們將使用以下兩種方法:

  • moveTo(x,y) 定義線條開始坐標
  • lineTo(x,y) 定義線條結束坐標

繪制線條我們必須使用到 "ink" 的方法,就像stroke().

實例

定義開始坐標(0,0), 和結束坐標 (200,100). 然后使用 stroke() 方法來繪制線條:

如何用HTML5 Canvas定義圖形_www.oalvodamoda.com

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

您的瀏覽器不支持 HTML5 canvas 標簽。</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

</script>

</body>

</html>

運行結果:

如何用HTML5 Canvas定義圖形_www.oalvodamoda.com

在canvas中繪制圓形, 我們將使用以下方法:

  • arc(x,y,r,start,stop)

實際上我們在繪制圓形時使用了 "ink" 的方法, 比如 stroke() 或者 fill().

實例

使用 arc() 方法 繪制一個圓:

如何用HTML5 Canvas定義圖形_www.oalvodamoda.com

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

您的瀏覽器不支持 HTML5 canvas 標簽。</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke();

</script>

</body>

</html>

運行結果:

如何用HTML5 Canvas定義圖形_www.oalvodamoda.com


Canvas - 文本

使用 canvas 繪制文本,重要的屬性和方法如下:

  • font - 定義字體
  • fillText(text,x,y) - 在 canvas 上繪制實心的文本
  • strokeText(text,x,y) - 在 canvas 上繪制空心的文本

使用 fillText():

實例

使用 "Arial" 字體在畫布上繪制一個高 30px 的文字(實心):

 

 

Hello World

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

您的瀏覽器不支持 HTML5 canvas 標簽。</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.fillText("Hello World",10,50);

</script>

</body>

</html>

運行結果:

Hello World

 

使用 strokeText():

實例

使用 "Arial" 字體在畫布上繪制一個高 30px 的文字(空心):

如何用HTML5 Canvas定義圖形_www.oalvodamoda.com

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

您的瀏覽器不支持 HTML5 canvas 標簽。</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.strokeText("Hello World",10,50);

</script>

</body>

</html>

運行結果:

如何用HTML5 Canvas定義圖形_www.oalvodamoda.com


Canvas - 漸變

漸變可以填充在矩形, 圓形, 線條, 文本等等, 各種形狀可以自己定義不同的顏色。

以下有兩種不同的方式來設置Canvas漸變:

  • createLinearGradient(x,y,x1,y1) - 創建線條漸變
  • createRadialGradient(x,y,r,x1,y1,r1) - 創建一個徑向/圓漸變

當我們使用漸變對象,必須使用兩種或兩種以上的停止顏色。

addColorStop()方法指定顏色停止,參數使用坐標來描述,可以是0至1.

使用漸變,設置fillStyle或strokeStyle的值為 漸變,然后繪制形狀,如矩形,文本,或一條線。

使用 createLinearGradient():

實例

創建一個線性漸變。使用漸變填充矩形:

如何用HTML5 Canvas定義圖形_www.oalvodamoda.com

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

您的瀏覽器不支持 HTML5 canvas 標簽。</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

// Create gradient

var grd=ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Fill with gradient

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

</script>

</body>

</html>

運行結果:

如何用HTML5 Canvas定義圖形_www.oalvodamoda.com

使用 createRadialGradient():

實例

創建一個徑向/圓漸變。使用漸變填充矩形:

如何用HTML5 Canvas定義圖形_www.oalvodamoda.com

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

您的瀏覽器不支持 HTML5 canvas 標簽。</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

// Create gradient

var grd=ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Fill with gradient

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

</script>

</body>

</html>

運行結果:

如何用HTML5 Canvas定義圖形_www.oalvodamoda.com


Canvas - 圖像

把一幅圖像放置到畫布上, 使用以下方法:

  • drawImage(image,x,y)

使用圖像:

如何用HTML5 Canvas定義圖形_www.oalvodamoda.com

實例

把一幅圖像放置到畫布上:

 

如何用HTML5 Canvas定義圖形_www.oalvodamoda.com

 

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

HTML <canvas> 標簽

Tag 描述
<canvas> HTML5 的 canvas 元素使用 JavaScript 在網頁上繪制圖像。

漂亮的頁面是有多種元素組成的,而這些元素需要我們認真學習及熟練應用之后才可以展現給用戶,如果你在學習網頁設計或者已經是網頁設計的一員了,那么趕緊加入我們吧,學習更多html5知識,做漂亮的網頁盡在IT培訓網

 

頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
------分隔線----------------------------
Web 教程
1、HTML 教程
1.1 HTML 簡介
1.2 HTML 編輯器
1.3 HTML 基礎
1.4 HTML 元素
1.5 HTML 屬性
1.6 HTML 標題
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 鏈接
1.10 HTML 頭部
1.11 HTML CSS
1.12 HTML 圖像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 區塊
1.16 HTML 布局
1.17 HTML 表單
1.18 HTML 框架
1.19 HTML 顏色
1.20 HTML 顏色名
1.21 HTML 顏色值
1.22 HTML 腳本
1.23 HTML 字符實體
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 總結
1.27 HTML 簡介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 瀏覽器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 內聯 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(視頻)
2.10 HTML5 Audio(音頻)
2.11 HTML5 Input 類型
2.12 HTML5 表單元素
2.13 HTML5 表單屬性
2.14 HTML5 語義元素
2.15 HTML5 Web 存儲
2.16 HTML5 Web SQL
2.17 HTML5 應用程序緩存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代碼規范
3、HTML 媒體
3.1 HTML 媒體(Media)
3.2 HTML 插件
3.3 HTML 音頻(Audio)
3.4 HTML視頻(Videos)播放
五月情天