Html5 Canvas 事前学習メモ(3) - 描画スタイルと描画テキスト

2dレンダリングコンテキストのfillStyleプロパティとストロークStyleプロパティを設定することで、塗りつぶし色や描画色を変更できます。

次の3つの方法で色を変更できます:

Rgb形式:

context.fillStyle = 'rgb(255,0,0)';//设置绘制颜色
context.strokeStyle = 'rgb(255,0,0)';//设置绘制颜色

16進コード形式:

context.fillStyle = '#FF0000';//设置绘制颜色
context.strokeStyle = '#FF0000';//设置绘制颜色

Word形式:

context.fillStyle = 'red';//设置绘制颜色
context.strokeStyle = 'red';//设置绘制颜色

また、ストロークから出てくるものについては、 、lineWidth属性を変更することで線の幅を変更することもできます。デフォルトの線の幅は1です。

効果の比較は次のとおりです:

上は線幅1、下は線幅5です。

j2meのsetColorのように、色と線幅は両方とも状態値であり、使用後にデフォルト値に戻されないことに注意してください。

Canvasに描画されたテキストは画像形式で描画され、通常のhtmlテキストのようにマウスポインタで選択することはできません。 Canvasにテキストを描画する際のフォント サイズは、fontのプロパティで設定できます。描画時には fill メソッドと ストローク メソッドもあり、それぞれ塗りつぶされた単語と中空の単語になります。最初のパラメーターはテキストで、2 番目と 3 番目のパラメーターはテキストのアンカー ポイント (左下) です。コーナー） 。コードとフォントの効果は次のとおりです:

は、それぞれ通常、斜体、中抜きフォントの効果です:

上記は、Html5 Canvasの事前学習メモです。 (3) - 描画スタイルと描画テキストの詳細については、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。