Thoughts on the implementation of canvas coding

Time:2021-10-25

Basic introduction

difficulty

  • Multi graphics management

    • generate
    • storage
    • Class classification
    • Unique identification
    • Check ID
    • Zindex stack
  • event

    • click
    • double-click
    • Right click
    • Drag
    • roll
  • animation

    • requestAnimationFrame
    • Minute hand rendering
    • Multi object motion
    • Motion curve strategy mode
  • Object collision

    • isPointInPath
    • isPointInStroke
    • Mathematical pickup

performance optimization

  • Framing rendering
  • Split screen rendering multiple coincident canvas
  • Reasonable context assignment operation consumes a lot of performance
  • Reduce rendering class content and pre clipping off screen
  • Off screen rendering DrawImage
  • Complex pure computing to worker execution