Canvas

Canvas 是基于状态的绘制 将状态设置与确定绘制的代码分隔开

基础

stroke 描边

arc 弧形

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

ctx.beginPath()
ctx.fillStyle = '#000'
ctx.arc(75, 75, 50, 0, 2 * Math.PI) // 优化，把值单独提前声明
ctx.fill() // 实心，空心用 stroke
ctx.closePath()

使用 HTML5 Canvas arc()绘制圆形/圆环-前端开发博客Canvas es6 class 设置与绘制分离Canvas 最佳实践（性能篇） | Taobao FED | 淘宝前端团队HTML5 Canvas Cheat Sheet

Manipulating video using canvas - Web APIs | MDNcanvas image/video playground

实用

blob - Copy image to clipboard using JavaScript - Stack Overflow copy 事件只是文字

选择本地视频，自动生成缩略图 canvas