今天看到一個講Canvas的教程，很通俗移動，所以轉(zhuǎn)載了下。

雖然大家都稱Canvas為html5的新標(biāo)簽，看起來好像Canvas屬于html語言的新知識，但其實(shí)Canvas畫圖是通過javascript來做的。所以，如果你想學(xué)習(xí)Canvas畫圖，你必須要有Javascript基礎(chǔ)。?
另外，畫圖嘛，總有一些圖像方面的術(shù)語和知識點(diǎn)，所以如果你有過做圖或美工經(jīng)驗(yàn)，學(xué)習(xí)Canvas會更容易。?

Canvas，意為畫布也。而Html5中的Canvas也真的跟現(xiàn)實(shí)生活中的畫布非常相似。所以，把他看成一塊實(shí)實(shí)在在的畫布可以加快理解。?

畫布?
用canvas作畫，首先，你需要有一塊“畫布”。如果你的書架里面沒有畫布，你可以買一卷回來放進(jìn)去。當(dāng)然，在網(wǎng)頁里面我們不需要花錢買，直接寫一個canvas即可，類似：?

代碼如下:
<canvas id="cvs" width="800" height="600">你的瀏覽器不支持canvas</canvas>

?

其中標(biāo)簽里面的文字是給不支持canvas的瀏覽器看的，支持的永遠(yuǎn)看不到。?
這個畫布的特性有必要說一下，他有兩個原生的屬性，即width和height.同時，因?yàn)樗彩且粋€html元素，所以他也可以使用css來定義width和height，但是，千萬要注意：他自身的寬高和通過css定義的寬高是不一樣的！?
我們用JS來改變Canvas的寬高，是這樣的：?

代碼如下:
canvas.width= 400 canvas.height = 300

?

但用JS通過操作CSS來改變Canvas的寬高，則是這樣：?

代碼如下:
canvas.style.width = '400px' canvas.style.height = '300px'

?

看得出來，語法上區(qū)別是很明顯的。實(shí)際上區(qū)別更明顯。?

他們的區(qū)別是什么？?
比如一塊寬1000的畫布，你在畫布左側(cè)畫了一條豎線，寬100像素。此時你把畫布自身的width設(shè)為500，相當(dāng)于把畫布的右半邊咔嚓掉了，但此時那豎線的寬度還是100。?
但如果你通過CSS來把畫布的寬度變成500，那就相當(dāng)于把畫布由1000擠壓到500，所以豎線的寬度變成了50.?
(這只是理論情況，設(shè)置canvas的寬度時，實(shí)際上重置canvas的寬或者高，他都會清空掉已畫出來的內(nèi)容。。P.S.如果實(shí)驗(yàn)的是時候尺寸不對的話，看看HTML的meta頭部的viewport)?
Canvas自身的寬高就是畫布本身的屬性，而css給他的寬高則可以看作是縮放，如果你縮放的太過隨意，那么畫布上的圖形可能變得你自己都認(rèn)不出來。?
所以有個建議：除非特殊情況，一定不要用css來定義Canvas的寬高。?
畫布有了，現(xiàn)在我們把他拿出來：?

復(fù)制代碼 代碼如下:
var cvs = document.getElementById('cvs');

?

看，跟獲取其他元素的辦法一模一樣。?

畫筆?
現(xiàn)在畫布已經(jīng)有了，想往上面涂鴉，當(dāng)然還需要一只筆。canvas取得筆的方法如下：?
var ctx = cvs.getContext('2d');其中g(shù)etContext方法就是用來拿筆的，但這里還有個參數(shù):2d，這是什么意思呢?這個可以看作是畫筆的種類。?
既然有2D，那么就會有3d了？以后估計會有，但現(xiàn)在沒有。所以我們先用這只2d的筆吧。?

那么我們可以多放幾只筆來備用嗎？答案是不能。?
我要問一個問題：你畫圖的時候是同時用幾只筆呢？相信99.9%的人都是只能用一只，雖然有些武林高手比如小龍女之類的可以兩只手同時畫，但這對一般人來說很不現(xiàn)實(shí)，是不是？?
所以現(xiàn)在你可以感到欣慰了，因?yàn)閔tml5的canvas標(biāo)簽也只支持同時用一支筆！?
有的寫JS寫的比較熟的同學(xué)可能會想耍個小聰明：我用前面獲取畫筆的方法多整幾只筆出來，不就行了？！
比如：?

復(fù)制代碼 代碼如下:
var con = cvs.getContext('2d'); var ctx = cvs.getContext('2d');

?

哈哈哈哈，好像成功了，在沒測試之前我也是這么想的，但，其實(shí)這只是一個幻覺！?
因?yàn)槲野l(fā)現(xiàn)，我把其中一支筆蘸上紅墨水，另外一支筆也自動蘸上了紅墨水！因?yàn)閮芍ЧP是一體的！fuck。?
如果你需要畫出不同的顏色，辦法就是把這只唯一的“筆”不停的蘸上新顏色。?
這其實(shí)不是一個優(yōu)點(diǎn)，是個缺陷，以后你會體會到的。?

坐標(biāo)?
2d世界，就是平面，在一個平面上確定一個點(diǎn)，需要兩個值，x坐標(biāo)和y坐標(biāo)。這是一個很重要的基礎(chǔ)概念。
canvas的原點(diǎn)是左上角，跟flash一樣。但蛋疼的是數(shù)學(xué)中的原點(diǎn)是左下角。這個…只能說習(xí)慣就好?

一些畫圖的基本常識?
首先你需要知道，怎樣的坐標(biāo)變化會畫出什么線？比如，x坐標(biāo)變大而y坐標(biāo)不變，則能畫出一條橫線；y坐標(biāo)變化而x坐標(biāo)不變，則是一條豎線。?
當(dāng)然，還有斜線，左斜線右斜線什么的，如果能對照圖片，大部分人都能一看即懂；只是用代碼畫起來就比較郁悶了，只能靠邏輯思維想出來。?
如果你現(xiàn)在感覺對線條一片混沌，也不用擔(dān)心，在學(xué)習(xí)的過程中自然會理解。?

其他?
canvas有一個和現(xiàn)實(shí)的畫布不一樣的特點(diǎn)就是，他默認(rèn)是透明的，沒有背景色。這在大部分時候非常重要。

轉(zhuǎn)載于:https://www.cnblogs.com/chijijuedi/p/4151269.html

總結(jié)

以上是生活随笔為你收集整理的[转]html5 Canvas画图教程(1)—画图的基本常识的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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