html5 canvas是什麼

青灯夜游
發布: 2021-11-18 15:34:27
原創
4525 人瀏覽過

canvas是HTML5提供的一個用於展示繪圖效果的標籤,「」標籤提供了一個空白的圖形區域(矩形區域的畫布),需要使用特定的JavaScript API來繪畫圖形。

html5 canvas是什麼

本教學操作環境: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();           // 描边
登入後複製

推薦教學:《html影片教學

#

以上是html5 canvas是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!