canvas是HTML5提供的一個用於展示繪圖效果的標籤，「
本教學操作環境：windows7系統、HTML5版、Dell G3電腦。
canvas 是HTML5 提供的一個用於展示繪圖效果的標籤
canvas 提供了一個空白的圖形區域，可以使用特定的JavaScript API來繪畫圖形（canvas 2D或WebGL）
首先由Apple 引入的，用於OS X的儀表板和Safari 瀏覽器
# canvas 是一個矩形區域的畫布，可以用JavaScript在上面繪畫。控制其每一個像素。
canvas 標籤使用 JavaScript 在網頁上繪製圖像，本身不具備繪圖功能。
canvas 擁有多種繪製路徑、矩形、圓形、字元以及添加圖像的方法。
1）、遊戲：canvas在基於Web的圖像顯示方面比Flash更加立體、更加精巧，canvas遊戲在流暢度和跨平台方面更牛。
2）、視覺化資料（資料圖表話語），如: 百度的echart、d3.js、three.js
3）、banner廣告：Flash曾經輝煌的時代，智慧型手機還未曾出現。現在以及未來的智慧機時代，HTML5技術能夠在banner廣告上發揮巨大作用，用Canvas實現動態的廣告效果再合適不過。
4）、未來
模擬器：無論從視覺效果或核心功能方面來說，模擬器產品可以完全由JavaScript來實現。
遠端電腦控制：Canvas可以讓開發者更能實現基於Web的資料傳輸，建構一個完美的視覺化控制介面。
圖形編輯器：Photoshop圖形編輯器將能夠100%基於Web實作。
<canvas width="600" height="400"></canvas>
作用：展示繪圖的內容，但不能進行繪圖
<canvas width="600" height="400">
IE9及其以上版本的浏览器，才支持canvas标签
提示：您的浏览器不支持canvas，请升级浏览器
</canvas>1）、可以使用html屬性/DOM屬性width 和height來設定
2）、不要：使用CSS樣式設定寬高
# 使用屬性設定寬高，實際上相當於增加了canvas畫布的像素
預設寬高： 300*150，表示：水平方向有300個像素，垂直方向有150個像素
使用屬性設定寬高，是增加或減少了canvas畫布的像素；
而使用css樣式，不會增加像素點，只是將每個像素點擴大了！
使用JavaScript中提供的繪圖API來繪製
每個canvas都有一套繪圖的API（工具）
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); // 将画笔移动到 100,100 的位置
ctx.lineTo(200, 100); // 从 100,100 到 200,100 画一条线段
ctx.stroke(); // 描边推薦教學：《html影片教學》
以上是html5 canvas是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
