Canvasの紹介と基本的な使い方

プログラミング 2023-07-11 22:28:09 訪問数: null

Canvasの紹介と基本的な使い方

1. キャンバスの概要

Canvas は HTML5 の新しいタグで、JavaScript を使用してさまざまなパターンを描画できます。

2. CanvasとSVGの違い

ここに画像の説明を挿入

  • svg は本質的に、XML を使用して 2D グラフィックスを記述するための言語です。

1. svg で作成された各要素は独立した DOM 要素であり、css および JS で操作できます。
2. svg 内の DOM 要素を変更すると、システムが自動的に DOM を再描画します。

  • Canvas は JavaScript を通じて 2D グラフィックを描画します

1. Canvas は単なる HTML 要素であり、その中のグラフィックスは個別に DOM 要素を作成しないため、Canvas 内の個々のグラフィックスを JS を通じて操作することはできません。
2. グラフを一度描画すると、データが変更された場合は再描画する必要があります。

  • 使用するシーン


表示するデータの量が比較的多い場合 (データの一部が要素ノードである場合など)、ユーザーの操作が多く、明瞭さが要求される場合 (ベクトル図)、キャンバスの使用がより適切です。の場合は、svg を使用する方が適切です。

3. Canvasの基本的な使い方

3.1 キャンバスの作成

<!DOCTYPE html>
<html lang="en">
<head>
  <title>canvas 基本使用</title>
</head>
<body>
  <canvas width="200" height="200">
    当前浏览器不支持canvas元素，请升级或更换浏览器！
  </canvas>
</body>
</html>
  • 効果

ここに画像の説明を挿入

  • キャンバスサイズ

キャンバス デフォルトのキャンバス サイズは 300 * 150 です。

キャンバスのサイズを変更するには 2 つのオプションがあります。

最初の方法: CSS によるスタイル設定 (推奨されません)

<html>
<head>
    <style>
        canvas {
      
      
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <canvas></canvas>
</body>
</html>

CSS を使用してサイズを定義すると、描画時に画像が引き伸ばされます。CSS サイズが初期キャンバスの比率と一致しない場合、画像は歪んで表示されます。
たとえば、この例が 400px * 400px になると、幅は 300px から 400px に拡張され、高さは 150px から 400px に拡張されます。

2 番目の方法: タグ属性経由 (推奨)

<html>
<head>
    ...
</head>
<body>
    <canvas width="400" height="400"></canvas>
</body>
</html>

したがって、canvas 要素によって提供される width 属性と height 属性を使用して、キャンバスの幅と高さを設定します。

3.2 レンダリングコンテキスト

Canvas キャンバスを作成した後の次のステップは、Canvas のコンテキスト環境を取得し、getContext() を通じてレンダリング コンテキストとペイント関数を取得することです。

<body>
  <canvas id="canvas"></canvas>
  <script>
    // 获取canvas元素
    var canvas = document.getElementById('canvas');
    // 获取二维渲染上下文
     var ctx = canvas.getContext('2d');
  </script>
</body>

コンテキストタイプ:

  • 2d: 2 次元のレンダリング コンテキストを作成します。
  • webgl: WebGLRenderingContext 3D レンダリング コンテキスト オブジェクトを作成します。
  • webgl2: WebGL2RenderingContext 3D レンダリング コンテキスト オブジェクトを作成します。WebGL バージョン 2 (OpenGL ES 3.0) を実装するブラウザでのみ使用できます。

3.3 キャンバス座標

Canvas は W3C 座標系を使用します。つまり、画面や新聞を上から下、左から右に読む習慣に従い、左上隅が原点となります。
ここに画像の説明を挿入

3.4 直線を引く

一番簡単なのは直線を引くことです。
ここに画像の説明を挿入

次の 3 つの方法を使用する必要があります。

  • moveTo(x, y): 初期位置を設定します。
  • lineTo(x, y): 次の点の座標 (x, y)。
  • ストローク(): グラフィックの輪郭を線で描きます。
<canvas id="canvas" width="400" height="400"></canvas>
<script>
  // 获取 canvas 元素
  var canvas = document.getElementById('canvas');
  // 获取绘图上下文
  var ctx = canvas.getContext('2d');
  // 绘制直线
  ctx.moveTo(50, 50);
  ctx.lineTo(200, 200);
  ctx.stroke();
</script>

3.5 三角形の描画

2 つの三角形を描き、1 つは塗りつぶし、もう 1 つはストロークで描きます。
ここに画像の説明を挿入
使用する必要がある方法:

  • beginPath(): 新しいパスを作成します。
  • closePath(): パスを閉じます。
  • ストローク(): グラフィックの輪郭を線で描きます。
  • fill(): パスのコンテンツ領域を塗りつぶして立体形状を生成します。
<canvas id="canvas" width="400" height="400"></canvas>
<script>
  // 获取 canvas 元素
  var canvas = document.getElementById('canvas');
  // 获取绘图上下文
  var ctx = canvas.getContext('2d');
  // 填充三角形
  ctx.beginPath();
  ctx.moveTo(25, 25);
  ctx.lineTo(105, 25);
  ctx.lineTo(25, 105);
  ctx.fill();

  // 描边三角形
  ctx.beginPath();// 重新开启一个路径
  ctx.moveTo(125, 125);
  ctx.lineTo(125, 45);
  ctx.lineTo(45, 125);
  ctx.closePath();
  ctx.stroke();
</script>

beginPath() はパスを再度開きます。後続の線分は前の線分に影響を与えません。
フィル（fill）を使用するとパスは自動的に閉じられますが、ストローク（ストローク）を使用してもパスは閉じられません。閉じたパス closePath() がストローク三角形関数に追加されていない場合、完全な三角形ではなく 2 つの線分のみが描画されます。

3.6 長方形を描く

線分を使用して四角形を描画できますが、canvas には四角形を直接生成するrect()などのメソッドも用意されています。

  • 長方形をストロークするにはストロークRect()を使用します
<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  ctx.strokeStyle = 'pink'
  ctx.strokeRect(50, 50, 200, 100)	// strokeRect(x, y, width, height)
</script>

ここに画像の説明を挿入

  • fillRect() を使用して四角形を塗りつぶします
<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  ctx.fillStyle = 'pink'
  ctx.fillRect(50, 50, 200, 100) // fillRect(x, y, width, height)
</script>

ここに画像の説明を挿入

  • 長方形を生成するには、rect() を使用します。

注:rect() メソッドが呼び出された後、レンダリングを支援するために stroke() または fill() を呼び出す必要があります。

<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  ctx.strokeStyle = 'red'
  ctx.fillStyle = 'pink'

  ctx.rect(50, 50, 200, 100) // rect(x, y, width, height)

  ctx.stroke()
  ctx.fill()
</script>

ここに画像の説明を挿入

  • 四角形をクリアするには、clearRect() を使用します。
<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  ctx.fillStyle = 'pink' // 设置填充颜色
  ctx.fillRect(50, 50, 200, 200) // 填充矩形

  ctx.clearRect(60, 60, 180, 90) // 清空矩形
</script>

ここに画像の説明を挿入

3.7 テキストの描画

文法：

ctx.font = 'font-style font-variant font-weight font-size/line-height font-family'
  • ストロークテキスト()メソッドはストロークされたテキストを描画します
<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  ctx.font = '60px Arial' 
  cxt.strokeStyle = 'pink' // 设置文本描边颜色
  ctx.strokeText('好运', 30, 90)	//strokeText(text, x, y, maxWidth)
</script>

ここに画像の説明を挿入

  • fillText() は塗りつぶされたテキストを描画します
<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  ctx.font = '60px Arial' 
  ctx.font = '60px Arial' 
  ctx.fillStyle = 'pink'
  ctx.fillText('好运', 30, 90)
</script>

ここに画像の説明を挿入

  • textAlign はテキストの水平方向の配置を設定します。

1. 開始: デフォルト。指定された位置の横座標から開始します。
2.end: 指定された座標の横軸で終了します。
3.left: 左揃え。
4.right: 右揃え。
5.center: 中央揃え。

<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  // 参考线
  ctx.moveTo(200, 0)
  ctx.lineTo(200, 400)
  ctx.strokeStyle = 'red'
  ctx.stroke()

  ctx.font = '30px Arial'

  // 横坐标开始位对齐
  ctx.textAlign = 'start' // 默认值,
  ctx.fillText('好运start', 200, 40)

  // 横坐标结束位对齐
  ctx.textAlign = 'end' // 结束对齐
  ctx.fillText('好运end', 200, 100)

  // 横坐标开始位对齐
  ctx.textAlign = 'left' // 默认值,
  ctx.fillText('好运start', 200, 160)

  // 横坐标结束位对齐
  ctx.textAlign = 'right' // 结束对齐
  ctx.fillText('好运end', 200, 220)

  // 居中对齐
  ctx.textAlign = 'center' // 右对齐
  ctx.fillText('好运center', 200, 280)
</script>

ここに画像の説明を挿入

  • textBaseline はテキストの垂直方向の配置を設定します

1. アルファベット: デフォルト。テキスト ベースラインは通常の文字ベースラインです。
2.top: テキストのベースラインは em ボックスの上部です。
3.bottom: テキストのベースラインは、em ボックスの下部です。
4.middle: テキストのベースラインは em ボックスの中央です。
5.hanging: テキスト ベースラインはぶら下がりベースラインです。

<canvas id="canvas" width="800" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  // 参考线
  ctx.moveTo(0, 150)
  ctx.lineTo(800, 150)
  ctx.strokeStyle = 'red'
  ctx.stroke()

  ctx.font = '20px Arial'

  // 默认 alphabetic
  ctx.textBaseline = 'alphabetic'
  ctx.fillText('好运alphabetic', 10, 150)

  // 默认 top
  ctx.textBaseline = 'top'
  ctx.fillText('好运top', 200, 150)

  // 默认 bottom
  ctx.textBaseline = 'bottom'
  ctx.fillText('好运bottom', 320, 150)

  // 默认 middle
  ctx.textBaseline = 'middle'
  ctx.fillText('好运middle', 480, 150)

  // 默认 hanging
  ctx.textBaseline = 'hanging'
  ctx.fillText('好运hanging', 640, 150)
</script>

ここに画像の説明を挿入

3.8 絵を描く

画像を描画するには、drawImage() メソッドを使用します。構文は次のとおりです。

drawImage(image, dx, dy)
  • image: レンダリングする画像オブジェクト。
  • dx: 画像の左上隅の横座標位置。
  • dy: 画像の左上隅の座標位置。
<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  // 1 创建 Image 对象
  const image = new Image()
  // 2 引入图片
  image.src = './images/hz.png'
  // 3 等待图片加载完成
  image.onload = () => {
      
      
    // 4 使用 drawImage() 方法渲染图片
    ctx.drawImage(image, 30, 30)	
  }
</script>

ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/weixin_43288600/article/details/126889674
おすすめ
ランキング
uni.request在接口状态码403等还是走success
Springboot は mybatisplus を統合しており、ページング クエリによって返される Page オブジェクトの合計は常に 0 です。
System.InvalidOperationExceptionが：「BuildWindowCoreは、子ウィンドウのハンドル搭乗を返しません。」
[Example 08] IPD system advancement: version naming rules for version management
カスタム NavigationBar -- UIView による描画
データとデータの移行を復元します（個人的なメモ、無用リーダー）
4. 2次元配列で検索する
vim的私人订制
Flutterのカスタムルーティング切り替えアニメーション
Javaコンテナの方法の簡単なアプリケーションのArrayList
アーカイブ
もっと
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)

コードワールド

© 2018 codetd.com