HTML5-Canvas implementiert Zeichenprogramm (mit Code)

Dieser Artikel stellt Ihnen das HTML5-Canvas-Implementierungszeichenprogramm vor (mit Code). Freunde in Not können darauf verweisen.

Projekteinführung

Das gesamte Projekt ist in zwei Teile gegliedert

1. Szene
   Die Szene ist für die Leinwand verantwortlich Steuerung und Ereignisüberwachung, Animationsverarbeitung

2. Sprite
   Sprite bezieht sich auf jedes Canvas-Element, das gezeichnet werden kann

Demo-Demo Adresse

Projektfunktionen

Starke Skalierbarkeit

Sprite Elf-Implementierung

Übergeordnete Klasse

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. Attribute:

• Optionen speichern alle Zeichnungsattribute

• fillStyle: Legt die Farbe, den Farbverlauf oder das Muster zum Füllen des Gemäldes fest oder gibt sie zurück.

• StrokeStyle: Legt die Farbe, den Farbverlauf oder das Muster fest oder gibt sie zurück. oder Muster, das zum Füllen des Gemäldes verwendet wird. Farbe, Farbverlauf oder Muster

• lineWidth: Aktuelle Linienbreite festlegen oder zurückgeben

• alle verwenden getContext( „2d“)-Objekt Von den nativen Attributen werden hier nur diese drei Attribute aufgeführt und können bei Bedarf erweitert werden.

• Sie können bei Bedarf weiter expandieren

1. Methode:

• Die setStyle-Methode wird verwendet, um die Attribute des aktuellen Sprites zurückzusetzen

• Sie können bei Bedarf weiter expandieren

Alle Sprites erben alle von der Element-Klasse.

Unterklasse

Unterklasse ist die spezifische Implementierung jedes Elf-Elements. Hier stellen wir die Implementierung des Kreiselements vor.

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() Methoden zum Erstellen Bögen/Kurven (wird zum Erstellen von Kreisen oder Teilkreisen verwendet)

• x x-Koordinate des Kreismittelpunkts.

• y Die y-Koordinate des Mittelpunkts des Kreises.

• r Der Radius des Kreises.

• sAngle Startwinkel im Bogenmaß. (Die Drei-Uhr-Position des Bogenkreises beträgt 0 Grad).

• eAngle Endwinkel, im Bogenmaß.

• gegen den Uhrzeigersinn Optional. Gibt an, ob der Plot gegen den Uhrzeigersinn oder im Uhrzeigersinn gezeichnet werden soll. False = im Uhrzeigersinn, true = gegen den Uhrzeigersinn.

Hinweis:

• Es sind nur zwei formale Parameter des Konstruktors erforderlich, nämlich die Koordinaten des Ankerpunkts.

• Andere formale Parameter müssen Standardwerte haben.

Aufrufzeitpunkt aller Methoden

• Wir rufen die Größenänderungsmethode auf, wenn wir Elemente auf der Leinwand zeichnen.

• Rufen Sie die moveTo-Methode auf, wenn Sie ein Element verschieben.

• choose wird aufgerufen, wenn die Maus gedrückt wird, um zu bestimmen, ob das aktuelle Element ausgewählt ist.

• getOffset wird aufgerufen, wenn ein Element ausgewählt wird, um die ausgewählte Position zu bestimmen.

• Zeichnungsfunktion, die beim Zeichnen von Elementen in die Szene aufgerufen wird.

Szenenimplementierung

1. Attributeinführung

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. Ereignislogik

class Sence {
  constructor(id, options = {
    width: 600,
    height: 400
  }) {
  /* ... */
  // 监听事件
    this.canvas.addEventListener('contextmenu', (e) => {
      console.log(e)
    })
    // 鼠标按下时的处理逻辑
    this.canvas.addEventListener('mousedown', (e) => {
    // 只有左键按下时才会处理鼠标事件
      if (e.button === 0) {
      // 鼠标的位置
        let x = e.offsetX
        let y = e.offsetY
        // 记录鼠标是否按下
        this.mouseState.down = true
        // 创建一个临时target
        // 记录目标元素
        let target = null
        if (this.state === this.stateList.drawing) {
        // 判断当前有没有精灵构造器，有的话就构造一个对应的精灵元素
          if (this.currentSpriteConstructor) {
            target = new this.currentSpriteConstructor(x, y)
          }
        } else if (this.state === this.stateList.moving) {
          let sprites = this.sprites
          // 遍历所有的精灵，调用他们的choose方法，判断有没有被选中
          for (let i = sprites.length - 1; i >= 0; i--) {
            if (sprites[i].choose(x, y)) {
              target = sprites[i]
              break;
            }
          }
          
          // 如果选中的话就调用target的getOffset方法，获取偏移量
          if (target) {
            let offset = target.getOffset(x, y)
            this.mouseState.offsetX = offset.x
            this.mouseState.offsetY = offset.y
          }
        }
        // 存储当前目标元素
        this.mouseState.target = target
        // 在离屏canvas保存除目标元素外的所有元素
        let ctx = this.outCtx
        // 清空离屏canvas
        ctx.clearRect(0, 0, this.width, this.height)
        // 将目标元素外的所有的元素绘制到离屏canvas中
        this.sprites.forEach(item => {
          if (item !== target) {
            item.draw(ctx)
          }
        })
        if(target){
            // 开始动画
            this.anmite()
        }
      }
    })
    this.canvas.addEventListener('mousemove', (e) => {
    //  如果鼠标按下且有目标元素，才执行下面的代码
      if (this.mouseState.down && this.mouseState.target) {
        let x = e.offsetX
        let y = e.offsetY
        if (this.state === this.stateList.drawing) {
        // 调用当前target的resize方法，改变大小
          this.mouseState.target.resize(x, y)
        } else if (this.state === this.stateList.moving) {
        // 取到存储的偏移量
          let {
            offsetX, offsetY
          } = this.mouseState
          // 调用moveTo方法将target移动到新的位置
          this.mouseState.target.moveTo(x - offsetX, y - offsetY)
        }
      }
    })
    document.body.addEventListener('mouseup', (e) => {
      if (this.mouseState.down) {
      // 将鼠标按下状态记录为false
        this.mouseState.down = false
        if (this.state === this.stateList.drawing) {
        // 调用target的validate方法。判断他要不要被加到场景去呢
          if (this.mouseState.target.validate()) {
            this.sprites.push(this.mouseState.target)
          }
        } else if (this.state === this.stateList.moving) {
          // 什么都不做
        }
      }
    })
  }
}

1. Methodeneinführung

class Sence {
// 动画
  anmite() {
    requestAnimationFrame(() => {
      // 清除画布
      this.clear()
      // 将离屏canvas绘制到当前canvas上
      this.paint(this.outCanvas)
      // 绘制target
      this.mouseState.target.draw(this.ctx)
      // 鼠标是按下状态就继续执行下一帧动画
      if (this.mouseState.down) {
        this.anmite()
      }
    })
  }
  // 可以将手动的创建的精灵添加到画布中
  append(sprite) {
    this.sprites.push(sprite)
    sprite.draw(this.ctx)
  }
  // 根据ID值，从场景中删除对应元素
  remove(id) {
    this.sprites.splice(id, 1)
  }
  // clearRect清除指定区域的画布内容
  clear() {
    this.ctx.clearRect(0, 0, this.width, this.height)
  }
  // 重绘整个画布的内容
  reset() {
    this.clear()
    this.sprites.forEach(element => {
      element.draw(this.ctx)
    })
  }
  // 将离屏canvas绘制到页面的canvas画布上
  paint(canvas, x = 0, y = 0) {
    this.ctx.drawImage(canvas, x, y, this.width, this.height)
  }
  // 设置当前选中的精灵构造器
  setCurrentSprite(Element) {
    this.currentSpriteConstructor = Element
  }

Empfohlene verwandte Artikel:

Wie Canvas den Code des QR-Codes und der Bildsynthese implementiert

HTML5 Canvas implementiert eine interaktive U-Bahn-Linienkarte

Das obige ist der detaillierte Inhalt vonHTML5-Canvas implementiert Zeichenprogramm (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!