清蒸萌新literal @[email protected]

let internal_clear = this.clear.bind(this)

var ld = new literaldrawing()
ld.mount("#canvas")
ld.draw(({context, clear, mouse})=>{
  clear() // 爆炸
  // in clear(): access undefined of ctx
})

class literaldrawing
{
  constructor()
  {
    /** @type {HTMLCanvasElement} 画布 DOM */
    this.canvas = null;
    /** @type {CanvasRenderingContext2D} 画布上下文 */
    this.ctx = null;

    /**
     * 鼠标位置
     */
    this.mouse = {x: 0, y: 0};
  }

  /**
   * 挂载画布
   * @param {String} selector 选择器
   */
  mount(selector)
  {
    this.canvas = document.querySelector(selector)
    this.ctx = this.canvas.getContext("2d")

    // 鼠标移动事件
    var mouse = this.mouse
    this.canvas.addEventListener("mousemove", (event)=>{
      mouse.x = event.clientX
      mouse.y = event.clientY
    })
  }

  /**
   * 绘制
   * @param {CallableFunction} drawfunc 执行绘制的回调函数
   */
  draw(drawfunc)
  {
    let internal_context = this.ctx
    let internal_clear = this.clear
    let internal_mouse = this.mouse

    let draw = () => {

      let callcontext = {
        context: internal_context,
        clear: internal_clear,
        mouse: internal_mouse
      }
      drawfunc(callcontext)

      requestAnimationFrame(draw)
    }

    draw()
  }

  clear()
  {
    this.ctx.save()

    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)

    this.ctx.restore()
  }
}

export default literaldrawing