可以理解為，它提供了一塊畫布，在它所掌控的區域，可以運用各種方法繪製圖形、文字，或者製作動畫、處理影象，等等。
通常我們能夠看到一些炫酷的動畫，很多都是canvas做出來的，但是需要各種元素和技巧綜合使用，不是一蹴而就的，我們先從基礎看起。
var canvas = document.getelementbyid("canvas");
var ctx = canvas.getcontext("2d");
位置：從**開始
路徑：圖形的軌跡
輪廓：繪製空心圖形
填充：繪製實心區域
用**來表達就是：
畫筆位置——moveto(x, y)
將畫筆移動到指定的座標x、y。
直線——lineto(x, y)
繪製一條從當前位置到指定位置的直線。
圓弧——arc(x, y, radius, startangle, endangle, anticlockwise)
畫乙個以（x,y）為圓心、以radius為半徑的圓弧（圓），從startangle開始到endangle結束，按照anticlockwise給定的方向（預設為順時針）來生成。
矩形——rect(x, y, width, height)
繪製乙個左上角座標為（x,y），寬高為width以及height的矩形。
幾個基本的圖形就是這樣了，還有一種比較複雜的是貝塞爾曲線。
二次貝塞爾——quadraticcurveto(cp1x, cp1y, x, y)
三次貝塞爾——beziercurveto(cp1x, cp1y, cp2x, cp2y, x, y)
什麼是較複雜的圖形呢？比如：氣泡、心形，或者其他不是很常規的形狀，如使用上面的方法就較難實現，貝塞爾曲線更能勝任。
那其實除了這些，canvas還有兩個動作要做，就是開始和結束繪製的指令，分別是：
beginpath()和closepath()
放在路徑繪製的開端和末尾，就像這樣：
ctx.beginpath();
ctx.moveto(125,125);
ctx.lineto(125,45);
ctx.lineto(45,125);
ctx.closepath();
ctx.stroke(); //輪廓
ctx.fill(); //填充
完整示例如下：
var canvas = document.getelementbyid("canvas");
var ctx = canvas.getcontext("2d");
ctx.beginpath();
ctx.moveto(125,125);
ctx.lineto(125,45);
ctx.lineto(45,125);
ctx.closepath();
ctx.stroke();//輪廓
ctx.beginpath();
ctx.arc(200, 200, 40, 0, 36, false);
ctx.closepath();
ctx.fillstyle="rgb(2,100,30)";//填充顏色
ctx.fill();//填充
這只是乙個很簡單的效果，我們也看到了路徑之後其他設定項的出現，就是填充顏色，這只是其中之一，但這裡暫時不詳述，我們先看看，除了圖形，canvas還能做什麼？
文字很好實現，直接上**：
ctx.font = "48px serif"; //字型大小、字型型別
ctx.filltext("hello world", 10, 300); // 文字內容和位置
但其實文字也是有兩種效果的，填充和輪廓，上面這種是填充：
如果把第二行**換成：
ctx.stroketext("hello world", 10, 50);
就是輪廓了
除此之外，還有一些對齊方式和文字方向的設定，先略去。
來看看分為兩塊，處理和繪製。
var img = new image(); // 建立乙個
獲取或者建立了影象，怎麼把它繪製到canvas裡去呢？
drawimage(image, x, y)
其中 image 是 image 或者 canvas 物件，x 和 y 是其在目標 canvas 裡的起始座標。
比如我們可以把上面的**寫成這樣：
var ctx = document.getelementbyid('canvas').getcontext('2d');
var img = new image();
img.onload = function()
img.src = '/img/canvas_intro/canvas_01.png';
上面這段**，我把當前頁面的三角形拿了過來，就是跟前面那個效果一樣的了
這裡只是把影象放入我們的工作區，如果想在這個區域畫別的圖形亦可，**接著往下寫就好了，有時候這可以為我們節省成本，比如，稍複雜一點的影象作為背景，簡單的圖形作為前景畫出。
那其實這個方法也不止這麼簡單，它有兩個變種
縮放
drawimage(image, x, y, width, height)
即指定影象大小，也就是可以根據需要進行縮放。
裁切
drawimage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight)
一長串引數看著有點頭皮發麻，但就因為這樣，才能讓我們去操作細節，它是用來裁切影象的。
這篇文從零開始介紹了canvas的工具箱裡有哪些工具，雖然尚不完整，作為開端，已經夠多，先到這，更多功能我們下篇再聊~
canvas 閉合 canvas 線的樣式
線的樣式在canvas中分為輪廓顏色 以及線型的樣式 strokestyle color 設定描邊輪廓的顏色ctx.linecap butt 預設 正常 屬性值 round 多出半圓 square 多出方形 ctx.linewidth 20 ctx.strokestyle red 線帽 線的兩端的樣...
canvas 閉合 canvas 簡版畫板
結合之前的api可以來個簡單的實踐 栗子 結合滑鼠互動效果實現畫板的功能，有寫的功能以及橡皮擦的功能 撤銷 前進就先不考慮了 首先來個布局 需要調節線的粗細以及橡皮擦的大小，我們需要h5的範圍表單元素 html 線的粗細 橡皮檫的大小 js1 獲取表單元素 線，橡皮大小 var linerange ...
Canvas學習 Canvas裡的座標系統
上一節我們做好了使用canvas的準備工作，但並沒有深入的介紹如何使用canvas，比如怎麼繪製圖形，怎麼做canvas動畫等。但並不用著急，隨著我們後面的深入學習，這一切都會知道的。在深入學習之前，我們有必要先了解canvas裡的座標系統。那麼這一節，就先來了解canvas的座標系統。在數學裡，我...