html5 canvas 畫圖教學案例分析_html5教學技巧

雖然大家都稱Canvas為html5的新標籤，看起來好像Canvas屬於html語言的新知識，但其實Canvas畫圖是透過javascript來做的。所以，如果你想學習Canvas畫圖，你必須要有Javascript基礎。
另外，畫圖嘛，總是有一些圖像方面的術語和知識點，所以如果你有過做圖或美工經驗，學習Canvas會更容易。
Canvas，意為畫布也。而Html5中的Canvas也真的跟現實生活中的畫布非常相似。所以，把他看成一塊實實在在的畫布可以加快理解。

畫布
用canvas作畫，首先，你需要有一塊「畫布」。如果你的書架裡面沒有畫布，你可以買一卷回來放進去。當然，網頁裡面我們不需要花錢買，直接寫一個canvas即可，類似：

複製程式碼

程式碼如下:

你的瀏覽器不支援canvas

其中標籤裡面的文字是給不支援canvas的瀏覽器看的，支援的永遠看不到。

注意：這個畫布的特性有必要說一下，他和IMG一樣，有兩個原生的屬性，即width和height.同時，因為他也是一個html元素，所以他也可以用css來定義width和height，但是，千萬要注意：他自身的寬高和透過css定義的寬高是不一樣的！
我們用JS來改變Canvas的原生寬高，是這樣的：

複製程式碼

程式碼如下:

canvas.width= 400
canvas.height = 300

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

複製程式碼

程式碼如下:

canvas.style.width = '🎜>

canvas.style.width = ' >canvas.style.height = '300px'


看得出來，語法上區別是很明顯的。實際上差異更明顯。
他們的差別是什麼？
例如一塊寬1000的畫布，你在畫布左側畫了一條垂直線，寬100像素。此時你把畫布本身的width設為500，相當於把畫布的右半邊咔嚓掉了，但此時那豎線的寬度還是100。
但如果你透過CSS來把畫布的寬度變成500，那就相當於把畫布由1000擠壓到500，所以豎線的寬度變成了50.
(這只是理論情況，實際上設定canvas的原生寬度時，他會清空掉已畫出來的內容。縮放的太過隨意，那麼畫布上的圖形可能變得你自己都認不出來。
所以有個建議：除非特殊情況，一定不要用css來定義Canvas的寬高。
畫布有了，現在我們把他拿出來：

複製代碼

代碼如下:

代碼如下:


代碼如下:


代碼如下:

代碼如下： var cvs = document.getElementById('cvs');

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

畫筆 現在畫布已經有了，想往上面塗鴉，當然還需要一隻筆。 canvas取得筆的方法如下： 複製代碼代碼如下: var ctx = cvs.getContext('2d');
getContext メソッドはペンを取得するために使用されますが、ここには別のパラメーターがあります: 2d これは何を意味しますか? これはブラシのタイプと見なすことができます。
2Dがあるから3Dもある？将来的にはあると思いますが、今はありません。それでは、最初にこの 2D ペンを使用してみましょう。
! それで、もう少しペンを予備に置いてもいいですか?答えはノーです。
質問したいのですが、絵を描くときに同時に何本のペンを使いますか? 99.9%の人は片方しか使えないと思いますが、シャオ・ロンヌなどの武術の達人は両手で同時に絵を描くことができますが、これは一般の人にとっては非常に非現実的ですよね。
html5 の Canvas タグは同時に 1 本のペンしか使用できないので、これで安心です。
JS の記述に慣れている学生の中には、トリックを実行したいと思う人もいるかもしれません。ブラシを取得する以前の方法を使用して、さらにペンをいくつか取得できます。それで十分ではないでしょうか? ！

例:

コードをコピーします

コードは次のとおりです:

var con = cvs.getContext('2d');
var ctx = cvs.getContext('2d'); はははは、そうです。試験前はそう思っていましたが、実はそれは単なる幻想でした。
ペンの 1 つを赤インクに浸すと、もう 1 つのペンも自動的に赤インクに浸されることに気づいたからです。だって2本のペンが1本になるんです！くそ。

別の色を描く必要がある場合は、この唯一の「ペン」を新しい色に浸し続ける方法があります。
これは実際には長所ではなく欠点であり、将来気づくことになります。


座標

2D 世界は平面です。平面上の点を決定するには、x 座標と y 座標の 2 つの値が必要です。これは非常に重要な基本的な概念ですが、誰もが数学を勉強しているので、詳細は説明しません。 キャンバスの原点はフラッシュと同じ左上隅です。しかし厄介なことに、数学の原点は左下隅にあるということです。これは…慣れるとしか言いようがありません

その他

本物のキャンバスと違う特徴として、デフォルトでは透明になっているのですが、背景色はありません。これはほとんどの場合非常に重要です。