在本文章中

在你開始之前

教程內容

相關資料

A note to contributors

<canvas> 是一種可以通過編寫腳本（通常是JavaScript）來實現繪制圖形的HTML元素。例如，它能用來繪制圖形，制作組合圖像或者生成簡單的 (偶爾 也不簡單) 動畫。右邊的圖像展示了<canvas>實現的一些例子，在接下來的教程中我們將會實現它們。

<canvas>第一次出現是被蘋果在Mac OS X儀表盤中實現，之后就被應用到Safari和谷歌Chrome中。Gecko1.8及以上的瀏覽器，比如火狐1.5，同樣也支持這個元素。<canvas>標簽是WhatWG Web applications 1.0標準化即HTML5的一部分。本教程從基礎入手，講述了如何使用<canvas>標簽來繪制2D圖像。提供的例子應該會使你了解你能夠通過canvas做到的事情并且將會提供一些幫助你開始建立自己的內容的代碼片段。

在你開始之前

使用<canvas>元素并沒有你想象的那么難，但是你仍然需要對HTML和JavaScript有 一定的了解。<canvas>元素在某些過舊的瀏覽器中是不被支持的，但是所有主流瀏覽器的最新版本都已經支持了該元素。canvas的默認 大小是300像素*150像素（寬*高）。但是可以通過使用CSS寬高屬性來自定義其大小。為了在canvas中繪制圖像我們會使用一個 javascript內容對象（javascript context object這應該如何翻譯），它將會創建一個動態圖像。

教程內容

• 基本使用

• 繪制圖像

• 使用圖像

• 添加格式和顏色

• 轉換

• 合成

• 動畫基礎

• 優化 canvas

相關資料

• Canvas topic page

• Drawing Graphics with Canvas

• Canvas examples

• HTML5 Tutorial

• Drawing Text Using a Canvas

• Adding Text to Canvas

• Canvas Demos - Games, applications, tools and tutorials

• Canvas Drawing and Animation Application

• Interactive canvas tutorial

• Canvas Cheat Sheet with all attributes and methods

• Adobe Illustrator to Canvas plug-in

• HTML5CanvasTutorials

• How to draw N grade Bézier curves with the Canvas API

• 31 days of canvas tutorials

• W3C Standard

• HTML5 Canvas tutorials and reference

轉載于:https://blog.51cto.com/wlzcool/1380422

總結

以上是生活随笔為你收集整理的Canvas 教程的全部內容，希望文章能夠幫你解決所遇到的問題。

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