整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
lt;canvas> 標(biāo)簽定義圖形，比如圖表和其他圖像，你必須使用腳本來繪制圖形。
比如在畫布上（Canvas）畫一個(gè)紅色矩形，漸變矩形，彩色矩形，和一些彩色的文字。
什么是 canvas?
HTML5 <canvas> 元素用于圖形的繪制，通過腳本 (通常是JavaScript)來完成.
<canvas> 標(biāo)簽只是圖形容器，您必須使用腳本來繪制圖形。
你可以通過多種方法使用 canvas 繪制路徑,盒、圓、字符以及添加圖像。
iphone
創(chuàng)建一個(gè)畫布（Canvas）
一個(gè)畫布在網(wǎng)頁中是一個(gè)矩形框，通過 <canvas> 元素來繪制。
注意: 默認(rèn)情況下 <canvas> 元素沒有邊框和內(nèi)容。
<canvas>簡單實(shí)例如下:
<canvas id="myCanvas" width="200" height="100"></canvas>
注意: 標(biāo)簽通常需要指定一個(gè)id屬性 (腳本中經(jīng)常引用), width 和 height 屬性定義的畫布的大小。
提示:你可以在HTML頁面中使用多個(gè) <canvas> 元素.
1.使用 style 屬性來添加邊框:
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
2.使用 JavaScript 來繪制圖像
canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內(nèi)部完成：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
實(shí)例解析:
3.首先，找到 <canvas> 元素:
var c=document.getElementById("myCanvas");
4.然后，創(chuàng)建 context 對象：
var ctx=c.getContext("2d");
getContext("2d") 對象是內(nèi)建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
下面的兩行代碼繪制一個(gè)紅色的矩形：
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
設(shè)置fillStyle屬性可以是CSS顏色，漸變，或圖案。fillStyle 默認(rèn)設(shè)置是#000000（黑色）。
fillRect(x,y,width,height) 方法定義了矩形當(dāng)前的填充方式。
iphone
Canvas 坐標(biāo)
canvas 是一個(gè)二維網(wǎng)格。
canvas 的左上角坐標(biāo)為 (0,0)
上面的 fillRect 方法擁有參數(shù) (0,0,150,75)。
意思是：在畫布上繪制 150x75 的矩形，從左上角開始 (0,0)。
坐標(biāo)實(shí)例
如下圖所示，畫布的 X 和 Y 坐標(biāo)用于在畫布上對繪畫進(jìn)行定位。鼠標(biāo)移動(dòng)的矩形框上，顯示定位坐標(biāo)。
Canvas - 路徑
在Canvas上畫線，我們將使用以下兩種方法：
moveTo(x,y) 定義線條開始坐標(biāo)
lineTo(x,y) 定義線條結(jié)束坐標(biāo)
繪制線條我們必須使用到 "ink" 的方法，就像stroke().
定義開始坐標(biāo)(0,0), 和結(jié)束坐標(biāo) (200,100)。然后使用 stroke() 方法來繪制線條:
Canvas - 文本
使用 canvas 繪制文本，重要的屬性和方法如下：
font - 定義字體
fillText(text,x,y) - 在 canvas 上繪制實(shí)心的文本
strokeText(text,x,y) - 在 canvas 上繪制空心的文本
使用 fillText():
使用 "Arial" 字體在畫布上繪制一個(gè)高 30px 的文字（實(shí)心）：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
大家有沒有學(xué)會(huì)呢？沒學(xué)會(huì)的話記得私信小編"011"哦~
anvas
Canvas API（畫布）是在HTML5中新增的標(biāo)簽用于在網(wǎng)頁實(shí)時(shí)生成圖像，并且可以操作圖像內(nèi)容，基本上它是一個(gè)可以用JavaScript操作的位圖（bitmap）。
Canvas 對象表示一個(gè) HTML 畫布元素 -<canvas>。它沒有自己的行為，但是定義了一個(gè) API 支持腳本化客戶端繪圖操作。
屬性
fillStyle 設(shè)置或返回用于填充繪畫的顏色、漸變或模式
strokeStyle 設(shè)置或返回用于筆觸的顏色、漸變或模式
shadowColor 設(shè)置或返回用于陰影的顏色
shadowBlur 設(shè)置或返回用于陰影的模糊級別
shadowOffsetX 設(shè)置或返回陰影距形狀的水平距離
shadowOffsetY 設(shè)置或返回陰影距形狀的垂直距離
方法、線條樣式、矩形、路徑、轉(zhuǎn)換、文本、圖像繪制、像素操作、合成、其他等多種功能。
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <canvas> 標(biāo)記.
應(yīng)用
繪制動(dòng)畫、視頻、特效等
例
通過 <canvas> 元素來顯示一個(gè)紅色的矩形：
<canvasid="myCanvas"></canvas><scripttype="text/javascript">var canvas=document.getElementById('myCanvas');var ctx=canvas.getContext('2d');ctx.fillStyle='#FF0000';ctx.fillRect(0,0,80,100);</script>
瀏覽器支持
IE 9、Firefox、Opera、Chrome 和 Safari 支持 <canvas> 標(biāo)簽。
注釋：IE 8 或更早版本的 IE 瀏覽器不支持 <canvas> 標(biāo)簽。
標(biāo)簽定義及使用說明
<canvas> 標(biāo)簽通過腳本（通常是 JavaScript）來繪制圖形（比如圖表和其他圖像）。
<canvas> 標(biāo)簽只是圖形容器，您必須使用腳本來繪制圖形。
HTML 4.01 與 HTML5之間的差異
<canvas> 標(biāo)簽是 HTML5 中的新標(biāo)簽。
提示和注釋
注釋：<canvas> 元素中的任何文本將會(huì)被顯示在不支持 <canvas> 的瀏覽器中。
提示：如想了解 canvas 對象的所有屬性和方法，請參閱HTML 畫布參考手冊。
屬性
New : HTML5 中的新屬性。
| 屬性 | 值 | 描述 |
|---|---|---|
| heightNew | pixels | 規(guī)定畫布的高度。 |
| widthNew | pixels | 規(guī)定畫布的寬度。 |
全局屬性
<canvas> 標(biāo)簽支持 HTML 的全局屬性。
事件屬性
<canvas> 標(biāo)簽支持 HTML 的事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
