HTML リファレンスマニュアル

HTML タグ一覧

HTML canvas strokeRect() メソッド

strokeRect() は Canvas 2D API はキャンバス内で、現在の描画スタイルを使用して、(x, y) 座標、幅 w、高さ h の矩形を描画するメソッドです。このメソッドはキャンバスに直接描画し、現在のパスを変更せずに、その後のfill()やstroke()の呼び出しに影響を与えません。

HTML canvas 参考マニュアル

オンラインサンプル

描画 100*100 ピクセルの正方形：

サンプル

<!DOCTYPE　html>
<html>
<head>
<title>HTML　canvas　strokeRect()　メソッドの使用(基本チュートリアルウェブ　oldtoolbag.com)</<title>
</<head>
<body>
<canvas　id="myCanvas"　width="300"　height="150"　style="border:1px　solid　#d3d3d3">
ブラウザはHTML5　canvas　タグ。
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2);
ctx.strokeRect(20,20,100,100);
</script>
</body>
</html>

テストして見て‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome および Safari がサポート strokeRect() メソッド。

注意：Internet Explorer 8 及びそれ以前のバージョンでは <canvas> 要素をサポートしていません。

定義と使用法

strokeRect() メソッドは矩形（塗りつぶしなし）を描画します。デフォルトの筆跡の色は黒です。

ヒント：使用してください strokeStyle 属性で筆跡の色、グラデーションまたはパターンを設定します。

JavaScript 语法：	context.strokeRect(x,y,width,height);

パラメータの値

パラメータ	説明
x	矩形の左上角の x 座標。
y	矩形の左上角の y 座標。
width	ピクセル単位で指定される矩形の幅。
height	ピクセル単位で指定される矩形の高さ。

HTML canvas 参考マニュアル

HTML: <template> タグ