canvas是HTML5提供的一個(gè)用於展示繪圖效果的標(biāo)籤，「」標(biāo)籤提供了一個(gè)空白的圖形區(qū)域（矩形區(qū)域的畫布），需要使用特定的JavaScript API來繪畫圖形。

本教學(xué)操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。

1、什麼是Canvas

canvas 是HTML5 提供的一個(gè)用於展示繪圖效果的標(biāo)籤

canvas 提供了一個(gè)空白的圖形區(qū)域，可以使用特定的JavaScript API來繪畫圖形（canvas 2D或WebGL）
首先由Apple 引入的，用於OS X的儀表板和Safari 瀏覽器

1.1 關(guān)於Canvas的一些說明

#?canvas 是一個(gè)矩形區(qū)域的畫布，可以用JavaScript在上面繪畫?？刂破涿恳粋€(gè)像素。

?canvas 標(biāo)籤使用 JavaScript 在網(wǎng)頁上繪製圖像，本身不具備繪圖功能。

?canvas 擁有多種繪製路徑、矩形、圓形、字元以及添加圖像的方法。

1.2 canvas主要應(yīng)用的領(lǐng)域（了解）

?1）、遊戲：canvas在基於Web的圖像顯示方面比Flash更加立體、更加精巧，canvas遊戲在流暢度和跨平臺(tái)方面更牛。

?2）、視覺化資料（資料圖表話語），如: 百度的echart、d3.js、three.js

?3）、banner廣告：Flash曾經(jīng)輝煌的時(shí)代，智慧型手機(jī)還未曾出現(xiàn)。現(xiàn)在以及未來的智慧機(jī)時(shí)代，HTML5技術(shù)能夠在banner廣告上發(fā)揮巨大作用，用Canvas實(shí)現(xiàn)動(dòng)態(tài)的廣告效果再合適不過。

?4）、未來

?模擬器：無論從視覺效果或核心功能方面來說，模擬器產(chǎn)品可以完全由JavaScript來實(shí)現(xiàn)。

?遠(yuǎn)端電腦控制：Canvas可以讓開發(fā)者更能實(shí)現(xiàn)基於Web的資料傳輸，建構(gòu)一個(gè)完美的視覺化控制介面。

?圖形編輯器：Photoshop圖形編輯器將能夠100%基於Web實(shí)作。

2、Canvas標(biāo)籤介紹

<canvas width="600" height="400"></canvas>

?作用：展示繪圖的內(nèi)容，但不能進(jìn)行繪圖

2.1 canvas的相容性

<canvas width="600" height="400">
    IE9及其以上版本的瀏覽器，才支持canvas標(biāo)簽
    提示：您的瀏覽器不支持canvas，請(qǐng)升級(jí)瀏覽器
</canvas>

2.2 設(shè)定寬高注意點(diǎn)

?1）、可以使用html屬性/DOM屬性width 和height來設(shè)定

?2）、不要：使用CSS樣式設(shè)定寬高

#?使用屬性設(shè)定寬高，實(shí)際上相當(dāng)於增加了canvas畫布的像素

?預(yù)設(shè)寬高： 300*150，表示：水平方向有300個(gè)像素，垂直方向有150個(gè)像素

?使用屬性設(shè)定寬高，是增加或減少了canvas畫布的像素；

?而使用css樣式，不會(huì)增加像素點(diǎn)，只是將每個(gè)像素點(diǎn)擴(kuò)大了！

2.3 繪圖

?使用JavaScript中提供的繪圖API來繪製

?每個(gè)canvas都有一套繪圖的API（工具）

# 2.3.1 繪圖的基本步驟

?1）、找到canvas畫布

?2）、透過canvas拿到繪圖上下文（一系列的API集合）

3）、使用API??繪製需要的圖形

// 1）、找到canvas
 var cv = document.getElementById("canvasId");
 
// 2）、拿到canvas繪圖上下文
 var ctx = cv.getContext("2d");
 
// 3）、使用上下文中的API繪制圖形
 ctx.moveTo(100, 100);   // 將畫筆移動(dòng)到 100,100 的位置
 ctx.lineTo(200, 100);   // 從 100,100 到 200,100 畫一條線段
 ctx.stroke();           // 描邊

推薦教學(xué)：《html影片教學(xué)》

以上是html5 canvas是什麼的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！