HTML5キャンバス

は、HTML5 に登場する新しいタグです。すべての DOM オブジェクトと同様に、js が描画のために呼び出すことができる独自のプロパティ、メソッド、イベントが含まれています。

Canvas とは何ですか?

HTML5

Canva を使用すると、さまざまな方法でパス、ボックス、円、文字を描画したり、画像を追加したりできます。

基本的に、IE8 とそれ以前のバージョンを除くすべてのブラウザーは

Canvas 要素を使用して画像を描画するには、

context.fill()//Fill

という 2 つのメソッドがあります。

Context.ストローク()//境界線を描画します

style: グラフィックスを描画する前に、描画スタイルを設定する必要があります

context.fillStyle//塗りつぶしスタイル

context.drawingStyle/ /境界線のスタイル

️境界線スタイルの 16 進カラー値: "#EEEEFF"rgb(1-255,1-255,1-255) ) rgba(1-255,1-255,1-255、透明度)

Canvas を使用して直線を描画します:

    php.cn

Canvas 座標

canvas は 2 次元のグリッドです。

キャンバスの左上隅の座標は(0,0)です

注:ここでは fillRect() メソッドが使用されています。文字通りの意味から、ここでのパラメーターは説明する価値があります。これは数学の場合と同じです。ここでの X と Y は、キャンバスの左上隅の開始点を基準としています。！

Circle

注:ここでの arc メソッドの使用法は、arc(X,Y,Radius,startAngle,endAngle,反時計回り) です。これは、(円の中心、中心 Y 座標、半径、開始角度 (ラジアン)、終了角度ラジアン、時計回りに描画するかどうか); グラデーション
グラデーションは四角形、円、線を塗りつぶすことができます。テキストなど。さまざまな形状は、それ自体で異なる色を定義できます。

キャンバスのグラデーションを設定するには 2 つの異なる方法があります:
createLinearGradient(x,y,x1,y1) - 線のグラデーションを作成します

createRadialGradient(x,y,r,x1,y1,r1) - パスを作成します方向性/円形グラデーション

グラデーションオブジェクトを使用する場合は、2 つ以上のストップカラーを使用する必要があります。

addColorStop() メソッドはカラーストップを指定し、パラメーターは 0 から 1 までの座標で記述されます。

グラデーションを使用し、fillStyle またはストロークスタイルの値をグラデーションに設定してから、形状を描画します。長方形、テキスト、線など。

Canvas - Text

text: 描画されるテキスト

Context.textAlign: 水平方向の配置

開始、終了、右、中央

context.textBaseline: 垂直方向の配置上、吊り下げ、中央、アルファベット、表意文字、下