初心者キャンバス <パート 1 - 基本>

HTML5 標準が発表されてからかなりの時間が経ちますが、Canvas は現在あまり多くの場所で使用されていないようです。非常に重要な理由は、Canvas の標準が完全に決定されておらず、実稼働環境での大規模な使用には適していないことです。ただし、Canvas の利点も非常に明白です。たとえば、技術共有ミーティングの抽選セッションでは、多数の要素を含むチャートを描画する場合、SVG ではその作業ができないことがよくあります。見たところ、エフェクトは比較的眩しかったですが、パフォーマンスの問題で不可能でした。各アバターは DOM であり、アニメーションは CSS3 によって制御されているため、パフォーマンスが非常に低くなります。さらに、ハードウェアのパフォーマンスの向上により、ビデオのスクリーンショットや画像処理などの機能が Web ページに徐々に実装されるようになりました。ほとんどの Web サイトでは Flash が使用されていますが、Mac コンピューターでは Flash のパフォーマンスが高くないため、追加の学習が必要です。知識。 。 Canvas は描画に JavaScript を直接使用しており、Mac に優しいため、Flash の後継と見なすことができます。

Canvas を使用する

<br/>

ここまでお話しましたが、Canvas とは一体何でしょうか?

Canvasは英語で「キャンバス」を意味しますが、ここで言うCanvasはHTML5の新しい要素であり、開発者はその上に一連のグラフィックを描画できます。 Canvas を HTML ファイルに記述する方法は非常に簡単です:

e50e883efb7830b88c9f0d172e39c8cfc2caaf3fc160dd2513ce82f021917f8b

ここで id 属性はすべての HTML 要素のプロパティを使用できます。Canvas に付属するプロパティは最後の 2 つ (それぞれ幅と高さを制御) だけであり、他にはありません。互換性については、CanIUseは現在、ユーザーが使用しているブラウザの90％で基本機能がサポートされており、ほとんどの場合安心して使用できると述べている。

注意: CSS 制御により Canvas が変形するため、Canvas に付属する幅と高さのプロパティを必ず使用してください。 PhptpShop と比較してみてください。後者は「画像サイズ」を変更しますが、前者は「キャンバス サイズ」を変更する正しい方法です。たとえば、下の画像は 3 つの画像を水平につなぎ合わせたものです。左端の黒いボックスはサイズが 50px * 50px の元の画像で、中央は画像サイズを 100px * 100px に変更した結果です。ぼやけますが、画像自体の座標範囲は大きくなっていないと言われています。右端が正しい 100px * 100px Canvas です。

Canvas ほとんどの描画メソッドは 5ba626b379994d53f7acf72a64f9b697 タグとは関係がなく、それらを操作するには JavaScript を使用する必要があります。これはいわゆる Canvas API です。

最初にこの要素を取得します:

var Canvas = document.getElementById('canvas');

次にメソッドを使用して、すべての Canvas API を呼び出すことができるエントリ ポイントを取得します:

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

2dを見て興奮して3dのことを考えますか？ 3D を記述する方法はありませんが、3D 世界への扉を開きたい場合は、canvas.getContext('webgl') を記述することができます。ただし、WebGL は OpenGL ES 2.0 をベースにした一連の標準であり、この記事とはまったく異なるため、ここでは説明しません。

Canvas

座標

の基本概念は、数学における一般的なデカルト座標系とは異なります。Canvasの座標系は、次のようになります:

。キャンバスの隅 (0,0)で、xは右に向かって増加し、yは下に向かって増加し、xとyは両方とも整数です(計算処理では整数でなくても、描画時には整数として扱われます) 、単位はピクセルです。

お絵かき

みんなを懐かしんでください。幼い頃にロゴ言語で遊んだ学生が何人いるかわかりません。このゲームでは、小さなカメを操作してボードの上を歩き、絵を描き、ペンを拾い、ペンを置くことができます。 Canvas でも同様で、ブラシの動きと描画を制御する必要があります。ただし、Canvas はより高度で、ブラシの位置を制御することなく、いくつかの機能を直接使用して絵を描くことができます。

Canvas の基本グラフィック

上で定義した ctx 変数を使用して、多くの興味深いことができます。まず、基本的なグラフィックを描画する方法を見てみましょう。

Line

特定の点に移動するブラシを指定し、現在の点から別の点まで描画するようにブラシに指示します。何度もブラシを動かして描画し、最終的に均一に画面に出力することができます。例は次のとおりです。

ctx.moveTo(10, 10);
ctx.lineTo(150, 50);
ctx.lineTo(10, 50);
ctx.moveTo(10, 20);
ctx.lineTo(40, 70);
ctx.stroke();

上記のコードでは、lineTo はラインを生成するために使用される関数です。実行後、ブラシはラインの終点に移動します。この時点ではラインは画面に表示されていないため、表示するにはストロークを呼び出す必要があることに注意してください。コンテンツを画面に出力するには多くのリソースが必要なので、最初に lineTo のウェーブを保存し、最後にストロークを使用して大きなものを配置できるため、この設計は理にかなっています。

パス

绘制路径非常简单，只需要先告诉 ctx 一声“我要开始画路径了”，然后通过各种方法（例如 lineTo）绘制路径。如果需要画一个封闭路径，那就最后告诉 ctx一声：“我画完了，你把它封闭起来吧。”当然，不要忘记利用 stroke 输出到屏幕上。

一个简单的例子：

ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(150, 50);
ctx.lineTo(10, 50);
ctx.closePath();
ctx.stroke();

如果我不想只描绘路径线条，而是想填充整个路径呢？可以将最后一行的 stroke 改成 fill，这样就跟使用了画图中的油漆桶一样，封闭路径里面的内容就都被填充上颜色了：

ctx.fill();

弧 / 圆形

绘制弧的函数参数比较多：

ctx.arc(圆心 x 坐标, 圆心 y 坐标, 半径, 起始角度, 终止角度, 是否为逆时针);

注意，在 Canvas 的坐标系中，角的一边是以圆心为中心的水平向右的直线。角度单位均为弧度。例如下图，确定了圆心、起始角度（图中标明的锐角）和终止角度（图中标明的钝角），方向为逆时针，于是就有了这么一个弧。如果方向为顺时针，那么就会是一个跟它互补的、非常非常大的弧……

所以如果转了 2π 圈之后，弧就成了圆形，因此也可以使用绘制弧的方式来绘制圆形：

ctx.beginPath();
ctx.arc(圆心 x 坐标, 圆心 y 坐标, 半径, 0, Math.PI * 2, true);
ctx.closePath();

最后一个参数随便填（当然也可以不填），因为不管是顺时针还是逆时针，转了 2π 圈之后都是一个圆。