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

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

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

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

コードをコピー

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

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

ラベル内のテキストは Canvas をサポートしていないブラウザ用であり、Canvas をサポートしているブラウザでは表示されません。
このキャンバスの特性について説明する必要があります。幅と高さという 2 つのネイティブ属性があると同時に、HTML 要素でもあるため、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');

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

ブラシ
キャンバスを用意したので、そこに落書きしたい場合は、もちろんペンが必要です。 Canvas がペンを取得するメソッドは次のとおりです:
var ctx = cvs.getContext('2d'); getContext メソッドはペンを取得するために使用されますが、ここには別のパラメータがあります。これは何を意味しますか。 ?この絵はブラシの種類であることがわかります。
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 つの値が必要です。これは非常に重要な基本概念です。
キャンバスの原点はフラッシュと同じ左上隅です。しかし厄介なことに、数学の原点は左下隅にあるということです。これは…癖としか言いようがありません

絵を描くための基本的な常識
まず、どのような座標を変更すると何が描画されるのかを知る必要があります。線？たとえば、x 座標が大きくなって y 座標が変化しない場合は水平線を描画でき、y 座標が変化しても x 座標が変化しない場合は垂直線を描画できます。
もちろん、スラッシュ、左スラッシュ、右スラッシュなどもあります。絵と比較できれば、ほとんどの人は一目で理解できますが、コードで描くだけではさらに憂鬱になります。論理的思考に頼って出てきます。
今セリフが混乱していても心配しないでください。学んでいくうちに自然に理解できるようになります。

その他
キャンバスの実際のキャンバスと異なる特徴の 1 つは、デフォルトで透明で背景色がないことです。これはほとんどの場合非常に重要です。