ホームページ >ウェブフロントエンド >H5 チュートリアル >キャンバスで長方形を描くにはどうすればよいですか?キャンバス上に長方形を描画する 2 つの方法の紹介
キャンバスで長方形を描くにはどうすればよいですか?キャンバス上に長方形を描画する 2 つの方法の紹介
- 不言オリジナル
- 2018-09-17 13:43:4517321ブラウズ
canvas 要素は JavaScript を使用して Web ページ上に画像を描画します。キャンバスは、すべてのピクセルを制御できる長方形の領域です。 Canvas には、パス、長方形、円、文字を描画したり、画像を追加したりするためのさまざまな方法があります。では、キャンバスを使用して長方形を描くにはどうすればよいでしょうか? キャンバス上に四角形を描画する実装方法については、次の記事で紹介していますので、必要に応じてご覧ください。
知っておく必要があるのは、キャンバス内の四角形に関連するメソッドは、rect() であり、実際にキャンバス上に四角形を描画するには、ストローク() メソッドまたは fill() メソッドを使用します。
rect() メソッドは、四角形の x 座標、四角形の y 座標、四角形の幅、四角形の高さの 4 つのパラメーターを受け取ることができます。これらのパラメータの単位はピクセルです。
次に、Strokerect() メソッドと fillrect() メソッドを使用して四角形を描画します。
まず、canvas で fillrect() メソッドを使用して描画された塗りつぶされた四角形の例を見てみましょう。
fillRect() メソッドは、指定された色で塗りつぶされた四角形をキャンバス上に描画します。塗りつぶしの色は、fillStyle プロパティによって指定されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用canvas画矩形</title>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script type="text/javascript">
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d'); //getContext() 方法可返回一个对象
context.fillStyle = "green"; // 设置或返回用于填充绘画的颜色、渐变或模式
context.fillRect(50,50,400,300); // x轴 y轴 宽 和 高 ,绘制“被填充”的矩形
}
draw("canvas");
</script>
</body>
</html>キャンバス上に塗りつぶされた四角形を描画すると、次のような効果が得られます:
##それでは、canvas で strokerect() メソッドを使用して描画された塗りつぶされていない四角形の例を見てみましょう。
strokeRect() メソッドは、指定された色でストロークされた四角形をキャンバス上に描画します。ストロークの色は、ストロークスタイルプロパティを通じて指定されます。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用canvas画矩形</title>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script type="text/javascript">
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d'); //getContext() 方法可返回一个对象
context.strokeStyle = "pink"; //图形边框的填充颜色
context.lineWidth = 5; //用宽度为 5 像素的线条来绘制矩形：
context.strokeRect(50,50,180,120); //绘制矩形（无填充）
context.strokeRect(110,110,180,120);
}
draw("canvas");
</script>
</body>
</html>
キャンバス上に塗りつぶされていない四角形を描画する効果は次のとおりです:
HTML5 開発マニュアルを参照してください。
以上がキャンバスで長方形を描くにはどうすればよいですか?キャンバス上に長方形を描画する 2 つの方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。