English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5キャンバス上に形状を描画する際には、ストローク（輪郭）とフィル（塗りつぶし）という二つの属性を設定する必要があります
HTML5キャンバス上に形状を描画する際には、二つの属性を設定する必要があります：
ストローク
フィル
ストローク（輪郭）とフィル（塗りつぶし）で形状の描画方法を決定します。ストロークは形状の輪郭です。フィルは形状の内部の内容です。
これは青い線と緑色で塗りつぶした矩形の例です（実際には二つの矩形です）：
これらの二つの四角形を描画するコードです：
<canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;">
HTML5 Canvasはサポートされていません
}/canvas>
<script>
// 1.ページが完全に読み込まれるのを待ちます。
window.onload = function() {
drawExamples();
0);
function drawExamples(){
// 2.canvas要素への参照を取得します。
var canvas = document.getElementById("ex1");
// 3.canvas要素から2Dコンテキスト。
var context = canvas.getContext("2d");
// 4.グラフを描画します。
context.fillStyle = "#0099context.fillStyle = "#00"
00";10context.strokeRect(10context.strokeRect( 10,100,
context.fillRect(
context.strokeStyle = "#0000ff"; 5context.lineWidth =
;10context.strokeRect(10context.strokeRect( 10,100,
0);
}/<script>/テストをしてみてください ‹›
Canvas not supported2どのように使用するか注意してください。
DコンテキストのstrokeStyleとfillStyleプロパティをそれぞれ線のスタイルと塗りつぶしのスタイルとして設定します。5また、lineWidthプロパティを使用して青い矩形の線の幅（輪郭）を設定する方法についても注意してください。lineWidthは以下のように設定されます。5これは、所説の矩形の線の幅がという意味です。
。2最後に、どのように指定するか注意してください。