コメント：キャンバスはキャンバスを意味します。誰もがCanvasをHTML5の新しいタグと呼びますが、CanvasはHTML言語の新しい知識に属しているようです。したがって、キャンバスの描画を学びたい場合は、JavaScriptの基礎を持っている必要があります
誰もがCanvasをHTML5の新しいタグと呼びますが、CanvasはHTML言語の新しい知識に属しているようです。したがって、キャンバスの描画を学びたい場合は、JavaScriptファンデーションが必要です。さらに、写真を描くときは、画像には常にいくつかの用語と知識ポイントがあります。そのため、写真やアートを作る経験がある場合は、キャンバスを学ぶのが簡単になります。
キャンバスはキャンバスを意味します。 HTML5のキャンバスは、実生活のキャンバスと非常によく似ています。したがって、彼を有形のキャンバスと見なすことは、理解を高速化することができます。
キャンバス
まず、キャンバスで描くには、キャンバスが必要です。本棚にキャンバスがない場合は、ロールを購入して入れることができます。もちろん、ウェブページにお金を使う必要はありません。
<canvas>ブラウザはCanvas </canvas>をサポートしていません
タグ内のテキストは、キャンバスをサポートしていないブラウザ用であり、サポートされているものは決して見えません。
注：このキャンバスの特性について言及する必要があります。 IMGと同様に、幅と高さの2つのネイティブ属性があります。同時に、HTML要素でもあるため、CSSを使用して幅と高さを定義することもできます。ただし、CSSを介して定義されている幅と高さとは、独自の幅と高さが異なることに注意してください。
JSを使用して、キャンバスのネイティブ幅と高さを変更します。
canvas.width = 400
canvas.height = 300
しかし、JSを使用して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'）;
getContextメソッドはペンを保持するために使用されますが、ここには別のパラメーターがあります：2d。これはどういう意味ですか？これはブラシの一種と見なすことができます。
2Dがあるので、3Dはありますか？おそらく将来はいくつかありますが、今はありません。最初にこの2Dペンを使用しましょう。
！それで、私たちはさらにいくつかのペンを余裕のあるものにすることができますか？答えはノーです。
質問したい：絵を描くときに同時にペンを使用するペン数は何枚ですか？私は、99.9％の人が1つしか使用できないと信じています。 Xiaolongnuなどの格闘技の修士号は、同時に両手で描くことができますが、これは普通の人にとっては非常に非現実的ですよね？
HTML5 Canvasタグも同時に1つのペンを使用することのみをサポートするため、安心感を感じることができます！
JSに精通している学生の中には、賢い人になるかもしれません。私は、以前の方法でブラシを取得する方法を使用して、もう少しペンを手に入れるのではないでしょうか。 ！
例えば：
var con = cvs.getContext（ '2d'）;
var ctx = cvs.getContext（ '2d'）;
ハハハハ、それは成功しているようです。私はテストの前にそう思っていましたが、実際、これはただの幻想です！
ペンの1つを赤インクに浸し、もう一方のペンも赤インクに自動的に浸したことがわかったからです！ 2つのペンは1つだからです！くそ。
異なる色を描く必要がある場合は、このユニークなペンを新しい色に浸し続ける方法です。
これは実際には利点ではなく、欠陥であり、将来それを経験します。
座標
2Dの世界は飛行機です。平面上のポイントを決定するには、2つの値、X座標、Y座標が必要です。これは非常に重要な基本的な概念ですが、誰もが数学を学んだので、私はそれについてあまり話しません。
キャンバスの起源は、フラッシュと同じ左上隅です。しかし、非常に迷惑なのは、数学の起源が左下隅であることです。これ...
他の
Canvasには、実際のキャンバスとは異なる機能があります。つまり、デフォルトでは透明であり、背景色がありません。これはほとんどの場合非常に重要です。