HTML5キャンバスに描画プログラムを実装（コード付き）

この記事では、HTML5 キャンバスの描画プログラム (コード付き) を紹介します。必要な方は参考にしていただければ幸いです。

プロジェクトの紹介

プロジェクト全体は2つの部分に分かれています

1. シーン
   シーンはキャンバス制御、イベント監視、アニメーション処理を担当します

2. Elf
   Elfは、キャンバスのすべての要素を指します。描画

デモデモアドレス

プロジェクトの特徴

強力なスケーラビリティ

スプライトエルフの実装

親クラス

class Element {
  constructor(options = {
    fillStyle: 'rgba(0,0,0,0)',
    lineWidth: 1,
    strokeStyle: 'rgba(0,0,0,255)'
  }) {
    this.options = options
  }
  setStyle(options){
    this.options =  Object.assign(this.options. options)
  }
}

1. 属性:

• オプション すべてを保存します描画プロパティ

• fillStyle: ペイントの塗りつぶしに使用される色、グラデーション、またはパターンを設定または返します

• ストロークスタイル: ストロークに使用される色、グラデーション、またはパターンを設定または返します

• lineWidth: 設定または返し現在の線幅

• は、getContext("2d") オブジェクトのネイティブ プロパティを使用します。ここにはこれら 3 つのプロパティのみがリストされており、必要に応じて拡張できます。

• 必要に応じて展開を続けることができます

1. メソッド:

• setStyleメソッドは現在のスプライトの属性をリセットするために使用されます

• 必要に応じて展開を続けることができます

すべてのエルフはすべて Element クラスから継承します。

サブクラス

サブクラスは、各elf要素の特定の実装です。 ここでは、円弧/曲線を作成するためのCircle要素

class Circle extends Element {
  // 定位点的坐标（这块就是圆心），半径，配置对象
  constructor(x, y, r = 0, options) {
    // 调用父类的构造函数
    super(options)
    this.x = x
    this.y = y
    this.r = r
  }
  // 改变元素大小
  resize(x, y) {
    this.r = Math.sqrt((this.x - x) ** 2 + (this.y - y) ** 2)
  }
  // 移动元素到新位置，接收两个参数，新的元素位置
  moveTo(x, y) {
    this.x = x
    this.y = y
  }
  // 判断点是否在元素中，接收两个参数，点的坐标
  choose(x, y) {
    return ((x - this.x) ** 2 + (y - this.y) ** 2) = 3
  }
}

arc()メソッドの実装を紹介します(円または部分円を作成するために使用されます)

• x 円の中心の x 座標。

• y 円の中心の y 座標。

• r 円の半径。

• sAngle 開始角度 (ラジアン単位)。 (円弧の円の 3 時の位置は 0 度です)。

• eAngle 終了角度 (ラジアン単位)。

• 反時計回り オプション。プロットを反時計回りに描画するか時計回りに描画するかを指定します。 False = 時計回り、True = 反時計回り。

注:

• コンストラクターの仮パラメータは 2 つだけ必要で、それはアンカーポイントの座標です。

• 他の仮パラメータにはデフォルト値が必要です。

全メソッドの呼び出しタイミング

• キャンバス上に要素を描画する際にresizeメソッドを呼び出します。

• 要素を移動するときに moveTo メソッドを呼び出します。

• choose は、マウスが押されたときに呼び出され、現在の要素が選択されているかどうかを判断します。

• getOffset は、要素が選択されると、選択された位置を決定するために呼び出されます。

• draw 描画関数。シーンに要素を描画するときに呼び出されます。

シーンシーンの実装

1. プロパティの紹介

イベントロジック

1. メソッドの紹介

class Sence {
  constructor(id, options = {
    width: 600,
    height: 400
  }) {
    // 画布属性
    this.canvas = document.querySelector('#' + id)
    this.canvas.width = options.width
    this.canvas.height = options.height
    this.width = options.width
    this.height = options.height
    // 绘图的对象
    this.ctx = this.canvas.getContext('2d')
    // 离屏canvas
    this.outCanvas = document.createElement('canvas')
    this.outCanvas.width = this.width
    this.outCanvas.height = this.height
    this.outCtx = this.outCanvas.getContext('2d')
    // 画布状态
    this.stateList = {
      drawing: 'drawing',
      moving: 'moving'
    }
    this.state = this.stateList.drawing
    // 鼠标状态
    this.mouseState = {
    // 记录鼠标按下时的偏移量
      offsetX: 0,
      offsetY: 0,
      down: false, //记录鼠标当前状态是否按下
      target: null //当前操作的目标元素
    }
    // 当前选中的精灵构造器
    this.currentSpriteConstructor = null
    // 存储精灵
    let sprites = []
    this.sprites = sprites
    /* .... */
  }
}

おすすめ関連記事:

1. Canvas 2 の実装方法QRコードと画像合成用のコード

インタラクティブな地下鉄路線図を実装するためのHTML5 Canvas

以上がHTML5キャンバスに描画プログラムを実装（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。