html5中的canvas是什么

本篇內容主要講解“html5中的canvas是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“html5中的canvas是什么”吧!

canvas是HTML5提供的一個用于展示繪圖效果的標簽，“<canvas>”標簽提供了一個空白的圖形區域（矩形區域的畫布），需要使用特定的JavaScript API來繪畫圖形。

本教程操作環境：windows7系統、HTML5版、Dell G3電腦。

1、什么是Canvas

canvas 是 HTML5 提供的一個用于展示繪圖效果的標簽

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

1.1 關于Canvas的一些說明

canvas 是一個矩形區域的畫布，可以用JavaScript在上面繪畫。控制其每一個像素。

canvas 標簽使用 JavaScript 在網頁上繪制圖像，本身不具備繪圖功能。

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

1.2 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實現。

2、Canvas標簽介紹

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

作用：展示繪圖的內容，但不能進行繪圖

2.1 canvas的兼容性

<canvas width="600" height="400">
    IE9及其以上版本的瀏覽器，才支持canvas標簽
    提示：您的瀏覽器不支持canvas，請升級瀏覽器
</canvas>

2.2 設置寬高注意點

1）、可以使用 html屬性/DOM屬性 width 和 height來設置

2）、不要：使用CSS樣式來設置寬高

使用 屬性設置寬高，實際上相當于增加了 canvas畫布的像素

默認寬高： 300*150，表示：水平方向有300個像素，垂直方向有150個像素

使用屬性設置寬高，是增加或減少了canvas畫布的像素；

而使用css樣式，不會增加像素點，只是將每個像素點擴大了！

2.3 繪圖

使用JavaScript中提供的繪圖API來繪制

每個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);   // 將畫筆移動到 100,100 的位置
 ctx.lineTo(200, 100);   // 從 100,100 到 200,100 畫一條線段
 ctx.stroke();           // 描邊

到此，相信大家對“html5中的canvas是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！