html5 キャンバス描画チュートリアル (1)—描画の基礎知識_html5 チュートリアル スキル

Canvas を HTML5 の新しいラベルと誰もが呼んでいますが、Canvas は HTML 言語の新しい知識のように見えますが、実際には Canvas の描画は JavaScript を通じて行われます。したがって、Canvas の描画を学びたい場合は、JavaScript の基礎が必要です。
また、描画に関しては必ず画像用語や知識が必要になるため、描画やアートの経験がある場合は、Canvas を学習するのが簡単です。

キャンバスとはキャンバスという意味です。 HTML5 のキャンバスは、実際のキャンバスと非常によく似ています。したがって、それを物理的なキャンバスとして見ると、理解が促進されます。

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

ラベル内のテキストは Canvas をサポートしていないブラウザ用であり、Canvas をサポートしているブラウザでは表示されません。
このキャンバスの特性について説明する必要があります。幅と高さという 2 つのネイティブ属性があると同時に、HTML 要素でもあるため、CSS を使用して幅と高さを定義することもできます。ただし、その独自の幅と高さは、CSS で定義された幅と高さとは異なりますので、注意してください。
次のように、JS を使用して Canvas の幅と高さを変更します。


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


文法の違いは明らかであることがわかります。実際には、違いはより明らかです。

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


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

ブラシ
キャンバスを用意したので、そこに落書きしたい場合は、もちろんペンが必要です。 Canvas がペンを取得するメソッドは次のとおりです:
var ctx = cvs.getContext('2d'); getContext メソッドはペンを取得するために使用されますが、ここには別のパラメータがあります。これは何を意味しますか。 ?この絵はブラシの種類であることがわかります。
2Dがあるから3Dもある？将来的にはあると思いますが、今はありません。それでは、最初にこの 2D ペンを使用してみましょう。

それで、ペンをもう少し予備に置いてもいいですか？答えはノーです。
質問したいのですが、絵を描くときに同時に何本のペンを使いますか? 99.9%の人は片方しか使えないと思いますが、シャオ・ロンヌなどの武術の達人は両手で同時に絵を描くことができますが、これは一般の人にとっては非常に非現実的ですよね。
html5 の Canvas タグは同時に 1 本のペンしか使用できないので、これで安心です。
JS の記述に慣れている学生の中には、トリックを実行したいと思う人もいるかもしれません。ブラシを取得する以前の方法を使用して、さらにペンをいくつか取得できます。それで十分ではないでしょうか? ！
例: