Canvas

什么是canvas

canvas是HTML5中的新增元素，支持使用js在该元素上绘制图像并对其控制；canvas绘制基于像素

canvas元素

可选属性

• canvas只有两个可选属性：height/width，数值单位为px，默认为width300，height150;
• 允许设置css属性修改canvas大小，但画布大小不会自动同步，需手动修改width/height属性
• 允许css宽高与画布宽高不一致，但尽量按比例设置，否则造成扭曲；或者仅设置css宽度，高度自适应，这与img标签同理

渲染上下文对象（Rending Context）

canvas元素会创建画布并向外提供渲染上下文对象，以此来绘制/处理画布要展示的内容

• let ctx = $cavs.getContext(‘2d/experimental-webgl’) 2D渲染/3D渲染

绘制形状

• 绘制矩形

  • ctx.fillRect(x, y, w, h) 绘制填充矩形
  • ctx.strokeRect(x, y, w, h) 绘制边框矩形
  • ctx.clearRext()x, y, w, h) 清除为透明矩形

• 绘制路径 路径：颜色，宽度的线条形成形状的点的集合

  • 路径绘制图形步骤
    1. 创建路径(ctx.beginPath())
    2. 调用绘制方法去绘制路径(ctx.moveTo(),ctx.lineTo(),ctx.arc())
    3. 主动闭合路径(ctx.closePath())
    4. 一旦路径生成，通过描边或填充路径区域来渲染图形(ctx.fill())
  • 绘制线
    • ctx.moveTo(x, y)
    • ctx.lineTo(x, y)
  • 绘制圆弧路径
    • ctx.arc(x, y, r, startPi, endPi, direct) 中心绘法
    • ctx.arcTo(xQie, yQie, xEnd, yEn, r) 切线绘法：切点坐标，中点坐标，圆弧半径
  • 绘制矩形
    • ctx.rect(x, y, w, y)

颜色与样式

• ctx.fillStyle 填充色
• ctx.strokeStyle 边框色
• ctx.globalAlpha = 0.8 全局不透明度
• ctx.lineWidth = 10 线宽，，默认1px
• ctx.lineCap = butt/round/square 线条以方形/半圆/额外拓长方形结束
• ctx.lineJoin = round/bevel/miter 线条之间以圆弧，三角形地，方形衔接
• ctx.setLineDash([20, 5]); 虚线样式：[实线长度, 间隙长度]
• ctx.lineDashOffset = -0; 虚线绘制起始偏移

绘制文本

• ctx.fillText(‘txt’, x, y, 可选最大宽度)
  • x,y默认基于文字左下方
  • 超出设置的最大宽度会自动压缩文字
• ctx.strokeText(‘txt’, x, y, 可选最大宽度)
• 文本样式
  • ctx.font = ‘10px sans-serif’(默认) 用来绘制文本的css样式
  • ctx.textAlign文本对齐：start(默认), end, left, right or center
  • ctx.textBaseline基线对齐选项：top, hanging, middle, alphabetic(默认), ideographic, bottom
  • 以上两个属性仅决定文本绘制的基准坐标参考位置
  • ctx.direction文本方向。可能的值包括：ltr, rtl, inherit(默认)

绘制图片

• ctx.drawImage($img, x, y, w可选, h可选, dx, dy, dw, dh) img元素，位置，大小，切点位置，切区大小

状态的保存与恢复

• ctx.save()与ctx.restore()，用于保存/恢复状态栈中状态
• 状态即画布当前状态，包括变形，各个Style值，裁切路径

变形

• translate(x, y) 移动canvas原点至指定坐标
• rotate(angle) 旋转画布坐标轴，在进行绘制：顺时针弧度
• scale(x, y) 增减绘制像素数目
• transform(a, b, c, d, e, f) 变形矩阵

合成层控制

• ctx.globalCompositeOperation = copy
  • 默认新层覆盖旧层
  • source-in 仅显示新层的重叠部分
  • source-out 仅显示新层的未重叠部分
  • source-atop 仅显示老层，和新层覆盖部分
  • destination-over 老层覆盖新层
  • destination-in 仅显示老层的重叠部分
  • destination-out 仅显示老层之外的新层
  • destination-atop 仅显示新层，和老层覆盖部分
  • lighter\darken\lighten 重叠部分合成色
  • xor 重叠透明
  • copy 仅显示新图层

裁剪

• ctx.clip() 将当前的绘制路径path转为裁剪路径，此时仅裁剪路径内可显示绘制

canvas动画

• requestAnimateFrame

canvas转换

转base64图片

• let src = $canvas.toDataURL(‘image/png’)

转blob转blob链接

• let blob = $canvas.toBlob(blob => let url = URL.createObjectURL(blob) ,’image/png’)

• Previous
  BOM
• Next
  pixi.js