1.基本知識(shí)

1.1 canvas的基本知識(shí)

• canvas元素的大小和繪圖表面的大小
• canvas繪圖環(huán)境及保存和回復(fù)
• 基本繪制操作
• 事件處理

1.1.1 canvas 基本知識(shí)

canvas是html5元素中功能最強(qiáng)大的一個(gè)。這種強(qiáng)大的能力是通過(guò)canvas的context對(duì)象表現(xiàn)出來(lái)的。它提供一套完成的繪圖功能，從而使我們可以使用javascript可以操作他們。

我們能用Canvas做些什么?

游戲，毫無(wú)疑問(wèn)，相比f(wàn)lash技術(shù)，html5基于web的圖像顯示更加立體，精巧。流行的游戲引擎cocos2d-js、Egret都基于html5的canvas

圖表制作:圖表制作時(shí)常被人們忽略,但無(wú)論企業(yè)內(nèi)部還是企業(yè)間交流合作都離不開圖表。現(xiàn)在一些開發(fā)者使用HTML/CSS完成圖標(biāo)制作,但Ohad認(rèn)為大家完全可以用Canvas來(lái)實(shí)現(xiàn)。當(dāng)然,使用SVG(可縮放矢量圖形)來(lái)完成圖表制作也是非常好的方法。

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

模擬器:Ohad認(rèn)為,無(wú)論從視覺(jué)效果還是核心功能方面來(lái)說(shuō),模擬器產(chǎn)品可以完全由JavaScript來(lái)實(shí)現(xiàn)。

遠(yuǎn)程計(jì)算機(jī)控制:Canvas可以讓開發(fā)者更好地實(shí)現(xiàn)基于Web的數(shù)據(jù)傳輸,構(gòu)建一個(gè)完美的可視化控制界面。

字體設(shè)計(jì):對(duì)于字體的自定義渲染將完全可以基于Web,使用HTML5技術(shù)進(jìn)行實(shí)現(xiàn)。

圖形編輯器:Ohad預(yù)測(cè),圖形編輯器將能夠100%基于Web實(shí)現(xiàn)。

其他可嵌入網(wǎng)站的內(nèi)容:類似圖表、音頻、視頻,還有許多元素能夠更好地與Web融合,并且不需要任何插件。Ohad呼吁大家繼續(xù)挖掘Canvas的潛力,運(yùn)用HTML5技術(shù)創(chuàng)造更多價(jià)值。

先看一個(gè)基礎(chǔ)的例子：

<canvas id="canvas" width="600" height="500">Canvas not supported</canvas><script>var canvas = document.getElementById('canvas'),ctx = canvas.getContext('2d'); // 獲取2d上下文ctx.font = '38pt Arial'; // 設(shè)置字體ctx.fillStyle = 'red'; // 設(shè)置填充顏色ctx.strokeStyle = 'blue'; // 設(shè)置描邊顏色// 文字描邊ctx.fillText('hello word', canvas.width / 2 - 150, canvas.height / 2 + 50); // 繪制文字 填充ctx.strokeText('hello word', canvas.width / 2 - 150, canvas.height / 2);</script> 復(fù)制代碼

效果入下

• 使用document.getElementById()方法獲取只想canvas的引用
• 在canvas上調(diào)用getContext('2d'),獲取繪圖上下文，2d必須小寫。
• 然后使用繪圖api，具體的繪制方法將在后續(xù)介紹。

<canvas id="canvas"> Canvas not supported </canvas> 復(fù)制代碼

這句話的意思，在不支持canvas元素的瀏覽器會(huì)顯示這句話，支持的瀏覽器則不會(huì)顯示。

注意：

設(shè)置canvas的width和height屬性時(shí)雖然都支持px為單位的后綴，但規(guī)范要求使用非負(fù)的整數(shù)。

默認(rèn)的canvas使用框高的，300 ×150個(gè)屏幕像素。可以通過(guò)制定canvas的width,height指定canvas大小，也可以通過(guò)css指定，但css指定大小會(huì)出現(xiàn)意外的情況，下面會(huì)具體說(shuō)明。

canvas元素的大小和繪圖表面的大小

我們?cè)谠O(shè)置canvas寬搞得時(shí)候可以設(shè)置width 和 height

<canvas id="canvas" width="300" height="150"></canvas> 復(fù)制代碼

也可以設(shè)置css的width 和 height

canvas{width:600px;height:300px} 復(fù)制代碼

但畫出來(lái)實(shí)際大小確實(shí)怪異的，實(shí)際上canvas有兩個(gè)大小。一個(gè)是元素大小，另一個(gè)是繪圖尺寸大小。

在指定canvas屬性width和height的時(shí)候，canvas大小和繪圖大小相同。繪制不會(huì)出現(xiàn)任何問(wèn)題。

當(dāng)canvas大小不符合其繪圖大小時(shí)，瀏覽器就會(huì)對(duì)圖片進(jìn)行縮放，適合符合元素大小。 注意：通過(guò)width和height屬性指定canvas大小是個(gè)好主意，如果使用css來(lái)修改元素大小，同時(shí)又沒(méi)有指定元素canvas的height和width屬性值時(shí)，瀏覽器會(huì)縮放后者，使之符合前者大小。可能會(huì)導(dǎo)致奇怪的后果

、、、、待更新

8大核心要點(diǎn)：我們能用HTML5 Canvas做什么？

轉(zhuǎn)載于:https://juejin.im/post/5b83ee73e51d4538936d5978

總結(jié)

以上是生活随笔為你收集整理的canvas使用技巧大全的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。