1.基本知識

1.1 canvas的基本知識

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

1.1.1 canvas 基本知識

canvas是html5元素中功能最強大的一個。這種強大的能力是通過canvas的context對象表現出來的。它提供一套完成的繪圖功能，從而使我們可以使用javascript可以操作他們。

我們能用Canvas做些什么?

游戲，毫無疑問，相比flash技術，html5基于web的圖像顯示更加立體，精巧。流行的游戲引擎cocos2d-js、Egret都基于html5的canvas

圖表制作:圖表制作時常被人們忽略,但無論企業內部還是企業間交流合作都離不開圖表。現在一些開發者使用HTML/CSS完成圖標制作,但Ohad認為大家完全可以用Canvas來實現。當然,使用SVG(可縮放矢量圖形)來完成圖表制作也是非常好的方法。

banner廣告:Flash曾經輝煌的時代,智能手機還未曾出現。現在以及未來的智能機時代,HTML5技術能夠在banner廣告上發揮巨大作用,用Canvas實現動態的廣告效果再合適不過。

模擬器:Ohad認為,無論從視覺效果還是核心功能方面來說,模擬器產品可以完全由JavaScript來實現。

遠程計算機控制:Canvas可以讓開發者更好地實現基于Web的數據傳輸,構建一個完美的可視化控制界面。

字體設計:對于字體的自定義渲染將完全可以基于Web,使用HTML5技術進行實現。

圖形編輯器:Ohad預測,圖形編輯器將能夠100%基于Web實現。

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

先看一個基礎的例子：

<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'; // 設置字體ctx.fillStyle = 'red'; // 設置填充顏色ctx.strokeStyle = 'blue'; // 設置描邊顏色// 文字描邊ctx.fillText('hello word', canvas.width / 2 - 150, canvas.height / 2 + 50); // 繪制文字 填充ctx.strokeText('hello word', canvas.width / 2 - 150, canvas.height / 2);</script> 復制代碼

效果入下

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

<canvas id="canvas"> Canvas not supported </canvas> 復制代碼

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

注意：

設置canvas的width和height屬性時雖然都支持px為單位的后綴，但規范要求使用非負的整數。

默認的canvas使用框高的，300 ×150個屏幕像素。可以通過制定canvas的width,height指定canvas大小，也可以通過css指定，但css指定大小會出現意外的情況，下面會具體說明。

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

我們在設置canvas寬搞得時候可以設置width 和 height

<canvas id="canvas" width="300" height="150"></canvas> 復制代碼

也可以設置css的width 和 height

canvas{width:600px;height:300px} 復制代碼

但畫出來實際大小確實怪異的，實際上canvas有兩個大小。一個是元素大小，另一個是繪圖尺寸大小。

在指定canvas屬性width和height的時候，canvas大小和繪圖大小相同。繪制不會出現任何問題。

當canvas大小不符合其繪圖大小時，瀏覽器就會對圖片進行縮放，適合符合元素大小。 注意：通過width和height屬性指定canvas大小是個好主意，如果使用css來修改元素大小，同時又沒有指定元素canvas的height和width屬性值時，瀏覽器會縮放后者，使之符合前者大小。可能會導致奇怪的后果

、、、、待更新

8大核心要點：我們能用HTML5 Canvas做什么？

轉載于:https://juejin.im/post/5b83ee73e51d4538936d5978

總結

以上是生活随笔為你收集整理的canvas使用技巧大全的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。