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()绘制圆形/圆环-前端开发博客open in new windowCanvas es6 class 设置与绘制分离open in new windowCanvas 最佳实践(性能篇) | Taobao FED | 淘宝前端团队open in new windowHTML5 Canvas Cheat Sheetopen in new window

Manipulating video using canvas - Web APIs | MDNopen in new windowcanvas image/video playgroundopen in new window

实用

blob - Copy image to clipboard using JavaScript - Stack Overflowopen in new window copy 事件只是文字

选择本地视频,自动生成缩略图 canvasopen in new window

Last Updated:
Contributors: cyio