HTML5 キャンバス描画チュートリアル ケース分析_html5 チュートリアル スキル

Canvas を HTML5 の新しいラベルと誰もが呼んでいますが、Canvas は HTML 言語の新しい知識のように見えますが、実際には Canvas の描画は JavaScript を通じて行われます。したがって、Canvas の描画を学びたい場合は、JavaScript の基礎が必要です。
また、描画に関しては必ず画像用語や知識が必要になるため、描画やアートの経験がある場合は、Canvas を学習するのが簡単です。
キャンバスとはキャンバスという意味です。 HTML5 のキャンバスは、実際のキャンバスと非常によく似ています。したがって、それを物理的なキャンバスとして見ると、理解が促進されます。

キャンバス
キャンバスで絵を描くには、まず「キャンバス」が必要です。本棚にキャンバスがない場合は、ロールを購入してそこに置くことができます。もちろん、Web ページでお金をかけて購入する必要はありません。

コードをコピー

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

お使いのブラウザは Canvas< をサポートしていません。 /canvas>

ラベル内のテキストは Canvas をサポートしていないブラウザ用であり、Canvas をサポートしているブラウザでは表示されません。

注: このキャンバスも HTML であるため、IMG と同様に、幅と高さという 2 つのネイティブ属性を同時に持つ必要があります。要素なので、CSS を使用して幅と高さを定義することもできますが、自分の幅と高さは CSS で定義された幅と高さとは異なることに注意してください。
次のように、JS を使用して Canvas のネイティブの幅と高さを変更します。

コードをコピーします

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

canvas.width= 400
canvas.height = 300

ただし、JS を使用して Canvas の幅と高さを変更するには、以下の操作を行います。 CSS は次のとおりです:

コードをコピー

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

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

文法の違いは明らかであることがわかります。実際には、違いはより明らかです。
それらの違いは何ですか?
たとえば、幅 1000 ピクセルのキャンバスに、キャンバスの左側に幅 100 ピクセルの垂直線を描きます。このとき、キャンバス自体の幅を500に設定します。これはキャンバスの右半分をクリックしたことと同じですが、この時点では縦線の幅は100のままです。
しかし、CSS でキャンバスの幅を 500 に変更すると、キャンバスを 1000 から 500 に絞るのと同じになり、縦線の幅は 50 になります。
(これは単なる理論上の状況です。実際には、キャンバスのネイティブの幅を設定すると、描画内容が消去されます。)
キャンバスの幅と高さは、キャンバス自体のプロパティであり、css で指定された幅と高さとみなすことができます。拡大縮小をあまりにも無造作に行うと、キャンバス上のグラフィックが認識できなくなる可能性があります。
そこで、ここに提案があります: 特別な状況がない限り、キャンバスの幅と高さを定義するのに CSS を使用しないでください。
キャンバスがそこにあるので、取り出してみましょう:

コードをコピーします

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

var cvs = document.getElementById('cvs');

ほら、他の要素を取得するのとまったく同じです。

ブラシ
キャンバスを用意したので、そこに落書きしたい場合は、もちろんペンが必要です。キャンバスからペンを取得する方法は次のとおりです:

コードをコピーします

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

var ctx = cvs.getContext('2d');

The getContext method is used to get the pen, but there is another parameter here: 2d. What does this mean? This can be regarded as the type of brush.
Since there is 2D, then there will be 3D? I guess there will be in the future, but not now. So let's use this 2d pen first.
! So can we put a few more pens in reserve? The answer is no.
I want to ask a question: How many pens do you use at the same time when drawing? I believe 99.9% of people can only use one. Although some martial arts masters such as Xiao Longnu can draw with two hands at the same time, this is very unrealistic for ordinary people, isn't it?
So now you can feel relieved, because the canvas tag of html5 only supports using one pen at the same time!
Some students who are more familiar with writing JS may want to play a trick: I can use the previous method of obtaining brushes to get a few more pens, isn’t that enough? !

For example:

Copy the code

The code is as follows:

var con = cvs.getContext('2d');
var ctx = cvs.getContext('2d');

Hahahaha, it seems to be successful, but not I thought so before the test, but in fact it was just an illusion!
Because I discovered that when I dipped one of the pens in red ink, the other pen was automatically dipped in red ink! Because the two pens are one! fuck.
If you need to draw different colors, the way is to keep dipping this only "pen" in new colors.
This is actually not an advantage, but a flaw, which you will realize in the future.

Coordinates
The 2d world is a plane. To determine a point on a plane, two values ​​are required, the x coordinate and the y coordinate. This is a very important basic concept, but since everyone has studied mathematics, I won’t go into details.
The origin of canvas is the upper left corner, the same as flash. But the annoying thing is that the origin in mathematics is the lower left corner. This... I can only say that you just get used to it

Others
One feature of canvas that is different from the real canvas is that it is transparent by default and has no background color. This is very important most of the time.