HTML5キャンバスに描画プログラムを実装（コード付き）-H5 チュートリアル-php.cn

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

不言

リリース： 2018-08-01 13:49:11

オリジナル

4260 人が閲覧しました

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

プロジェクトの紹介

プロジェクト全体は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)
  }
}

ログイン後にコピー

属性:

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

fillStyle: ペイントの塗りつぶしに使用される色、グラデーション、またはパターンを設定または返します
ストロークスタイル: ストロークに使用される色、グラデーション、またはパターンを設定または返します
lineWidth: 設定または返し現在の線幅
は、getContext("2d") オブジェクトのネイティブプロパティを使用します。ここにはこれら 3 つのプロパティのみがリストされており、必要に応じて拡張できます。

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

メソッド:

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) < (this.r ** 2)
  }
  // 偏移，计算点和元素定位点的相对偏移量（ofsetX， offsetY）
  getOffset(x, y) {
    return {
      x: x - this.x,
      y: y - this.y
    }
  }
  // 绘制元素实现，接收一个ctx对象，将当前元素绘制到指定画布上
  draw(ctx) {
    // 取到绘制所需属性
    let {
      fillStyle,
      strokeStyle,
      lineWidth
    } = this.options
    // 开始绘制beginPath() 方法开始一条路径，或重置当前的路径
    ctx.beginPath()
    // 设置属性
    ctx.fillStyle = fillStyle
    ctx.strokeStyle = strokeStyle
    ctx.lineWidth = lineWidth
    // 画圆
    ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
    // 填充颜色
    ctx.stroke()
    ctx.fill()
    // 绘制完成
  }
  // 验证函数，判断当前元素是否满足指定条件，此处用来检验是否将元素添加到场景中。
  validate() {
    return this.r >= 3
  }
}

ログイン後にコピー

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

x 円の中心の x 座標。
y 円の中心の y 座標。
r 円の半径。
sAngle 開始角度 (ラジアン単位)。 (円弧の円の 3 時の位置は 0 度です)。
eAngle 終了角度 (ラジアン単位)。
反時計回りオプション。プロットを反時計回りに描画するか時計回りに描画するかを指定します。 False = 時計回り、True = 反時計回り。

注:

コンストラクターの仮パラメータは 2 つだけ必要で、それはアンカーポイントの座標です。
他の仮パラメータにはデフォルト値が必要です。

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

キャンバス上に要素を描画する際にresizeメソッドを呼び出します。
要素を移動するときに moveTo メソッドを呼び出します。
choose は、マウスが押されたときに呼び出され、現在の要素が選択されているかどうかを判断します。
getOffset は、要素が選択されると、選択された位置を決定するために呼び出されます。
draw 描画関数。シーンに要素を描画するときに呼び出されます。

シーンシーンの実装

プロパティの紹介

イベントロジック

メソッドの紹介

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
    /* .... */
  }
}

ログイン後にコピー