html5 での Canvas の使用による線と面の描画

零下一度

リリース： 2017-05-06 11:51:36

オリジナル

2056 人が閲覧しました

canvas がキャンバスであることは知っていますが、今日はキャンバスに線と面を描きます。

1. Html

<!doctype html>
<html lang="en">
 <head>
  <title>Canvas 2D画线和面</title>
 </head>
 <body>
  <canvas id="cv" width="150" height="150"></canvas>
 </body>
</html>

ログイン後にコピー

canvas のキャンバスは、幅と高さが設定されていない場合、幅を 300 ピクセルに、高さを 150 ピクセルに初期化します。要素のサイズは CSS を使用して変更できます。描画時に画像が

frame の寸法に合わせて伸びる場合、CSS の寸法は初期キャンバスの比率と一致せず、歪みが発生します。 2. レンダリングコンテキスト

キャンバスは最初は空白です。これを実証するには、まずスクリプトでレンダリングコンテキストを見つけて、それを描画する必要があります。

html5 での Canvas の使用による線と面の描画

<!doctype html> <html lang="en"> <head> <title>Canvas 2D画线和面</title> </head> <body> <canvas id="cv" width="150" height="150"></canvas> </body> </html>
ログイン後にコピー

var canvas = document.getElementById('cv'); var ctx = canvas.getContext('2d');
ログイン後にコピー

ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50);
ログイン後にコピー

ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(100, 100); ctx.stroke();
ログイン後にコピー

html5 での Canvas の使用による線と面の描画

<!doctype html> <html lang="en"> <head> <title>Canvas 2D画线和面</title> </head> <body> <canvas id="cv" width="150" height="150"></canvas> </body> </html>ログイン後にコピー

var canvas = document.getElementById(&#39;cv&#39;); var ctx = canvas.getContext(&#39;2d&#39;);ログイン後にコピー

ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50);ログイン後にコピー

ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(100, 100); ctx.stroke();ログイン後にコピー

<!doctype html> <html lang="en"> <head> <title>Canvas 2D画线和面</title> </head> <body> <canvas id="cv" width="150" height="150"></canvas> </body> </html>
ログイン後にコピー

var canvas = document.getElementById('cv'); var ctx = canvas.getContext('2d');
ログイン後にコピー

ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50);
ログイン後にコピー

ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(100, 100); ctx.stroke();
ログイン後にコピー