コメント：キャンバスはキャンバスを意味します。 HTML5のキャンバスは、実生活のキャンバスと非常によく似ています。したがって、それを実際のキャンバスとして扱うことで、理解を高速化できます。 Canvas Drawingを学びたい場合は、JavaScriptファンデーションが必要です。あまり言いません、ポイントに到達します。
誰もがCanvasをHTML5の新しいタグと呼びますが、CanvasはHTML言語の新しい知識に属しているようです。したがって、キャンバスの描画を学びたい場合は、JavaScriptファンデーションが必要です。さらに、写真を描くときは、画像には常にいくつかの用語と知識ポイントがあります。そのため、写真やアートを作る経験がある場合は、キャンバスを学ぶのが簡単になります。
キャンバスはキャンバスを意味します。 HTML5のキャンバスは、実生活のキャンバスと非常によく似ています。したがって、彼を有形のキャンバスと見なすことは、理解を高速化することができます。
キャンバス
まず、キャンバスで描くには、キャンバスが必要です。本棚にキャンバスがない場合は、ロールを購入して入れることができます。もちろん、ウェブページにお金を使う必要はありません。
<canvas>ブラウザはCanvas </canvas>をサポートしていません
タグ内のテキストは、キャンバスをサポートしていないブラウザ用であり、サポートされているものは決して見えません。
このキャンバスの特性について言及する必要があります。幅と高さの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座標が必要です。これは非常に重要な基本概念です。
キャンバスの起源は、フラッシュと同じ左上隅です。しかし、非常に迷惑なのは、数学の起源が左下隅であることです。これ...
描画に関するいくつかの基本的な知識
まず第一に、どのような座標の変更がどのラインを描くかを知る必要がありますか？たとえば、x座標が大きくなり、y座標が変化しない場合、水平線を描画できます。 Y座標が変更されますが、x座標が変化しない場合、垂直線を描画できます。
もちろん、斜めの線、左対角線、右斜めの線もあります。写真を比較できれば、ほとんどの人はすぐにそれらを理解できます。コードで描く方が憂鬱であり、論理的な思考を通してしかそれを考えることができます。
今、線について混乱していると感じても、心配しないでください。学習プロセス中に自然に理解できます。
他の
Canvasには、実際のキャンバスとは異なる機能があります。つまり、デフォルトでは透明であり、背景色がありません。これはほとんどの場合非常に重要です。