canvas(一)
1.基本用法
html
<canvas id="drawing" width="200" height="200"></canvas>
上下文
const drawing = document.getElementById('drawing') if (drawing.getContext) { const ctx = drawing.getContext('2d') }
导出img
const imgUrl = drawing.toDataUrl('image/png')
2. 2D上下文
2.1 填充和描边
ctx.strokeStyle = 'red'
ctx.fillStyle = 'green'
2.2 矩形
ctx.fillRect(10, 10, 50, 50) ctx.strokeRect(10, 10, 50, 50) ctx.clearRect(10, 10, 50, 50)
2.3 路径
ctx.beginPath() ctx.arc(10, 10, r, 0, 2 * Math.PI, false) ctx.arcTo(x1, y1, x2, y2, r) ctx.lineTo(x, y) ctx.moveTo(x, y)
ctx.closePath()
ctx.fill()
ctx.stroke()
ctx.clip()
2.4文本
ctx.font = 'bold 14px Arial' ctx.textAlign = 'start/center/end' ctx.textBaseLine = 'top/middle/bottom' ctx.fillText('test', x, y) ctx.mesureText()
2.5变换
ctx.rotate(angle) ctx.scale(scaleX, scaleY) ctx.translate(x, y) ctx.trnasform(m11, m12, m21, m22, dx, dy) m11 m12 dx m21 m22 dy 0 0 1 x = m11*x0 + m12*y0 + dx y = m21*x0 _ m22*y0 + dy
2.6图像
ctx.drawImage(image, 10, 50, 20, 30)
2.7阴影
ctx.shadowColor = 'red' ctx.shadowOffsetX = 5 ctx.shadowOffsetY = 5 ctx.shadowBlur = 4
2.8渐变
const gradient = ctx.createLinearGradient(30, 30, 70, 70) gradient.addColorStop(0, 'white') gradient.addColorStop(1, 'black') ctx.fillStyle = gradient const gradient = ctx.createRadialGradient(50, 50, 10, 50, 50, 30)
2.9模式
const pattern = ctx.createPattern(image, 'repeat/reapeatX/repeateY/no-repeat')
ctx.fillStyle = pattern
2.10使用图像数据
const imageData = ctx.getImageData(10, 5, 50, 50)
width, height, data
2.11 合成
ctx.globalAlpha = 0.5
ctx.gloabalCompositionOperation = 'source-over'