canvas动画效果

基本用法

1
2
3
4
5
6
7
8
<canvas id='drawing' width='600' height='600'>不兼容时提示的文字</canvas>
let drawing= document.querySelector('#drawing')
// 确定浏览器是否支持<canvas>元素
if (drawing.getContext){
  let context = drawing.getContext('2d')
  // do something
}

toDataURL

1
2
// parmas: 'image/png' | 'image/jpeg'(只支持较新版本）
let imgURL = context.toDataURL('image/png')

2D上下文

  • 填充和描边

    1
    2
    3
    4
    // parmas: 字符串，渐变对象，模式对象
    // '#ffffff' 'red' 'rgba(0,0,255,.5)'  'rgb(0,0,225)'  context.createLinearGridient()  context.createPattern()
    context.fillStyle = 'rgba(0,0,255,.5)'
    context.strokeStyle = 'red'

  • 绘制矩形

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // parmas: x,y,width,height
    // 有填充
    context.fillStyle = '#0000ff'
    context.fillRect(10, 10, 50, 50)            
    // 无填充
    context.strokeStyle = 'pink'            
    context.strokeRect(10, 80, 50, 50)
    // 清除矩形区域
    context.clearRect(10, 10, 20, 20)

  • 绘制路径

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    // 开始路径
    context.beginPath()
    // 线宽
    // parmas: integer
    context.lineWidth = 5
    // 线头
    // parmas: 'butt' (平头) | 'round' (圆头) | 'square' (方头)
    context.lineCap = 'round'
    // 相交点
    // parmas: 'round' (圆交) | 'bevel' (斜交) | 'miter' (斜接)
    context.lineJoin = 'bevel'
    // 绘制圆
    // parmas: x,y,r,begin(rad),end(rad),boolean(false -> 顺时针)
    context.arc(100, 100, 99, 0, 2 * Math.PI, false)
    // 绘制弧
    arcTo
    bezierCurveTo
    quadraticCurveTo
    react

  • 绘制文本

    1
    2
    3
    4
    5
    6
    7
    8
    // parmas: 文本样式 、大小、字体
    context.font = '14px bold Arial'
    // parmas: start | end | center | left | right (建议使用start | end)
    context.textAlign = 'center'
    // parmas: top | hanging | middle | alphabetic | ideotraphic | bottom
    context.textBaseLine = 'buttom'
    // parmas: string,x,y
    context.fillText(12, 300, 230)