小程序canvas

小程序canvas

• <canvas style="width: 300px; height: 200px" canvas-id="canvas" id="canvas"></canvas>
  

• createCanvasContext: 创建 canvas 绘图上下文
  • const ctx = uni.createCanvasContext('canvas');
  • 保存当前的绘图上下文。
    ctx.save();
  • arc:画一条弧线
    ctx.arc(100, 75, 50, 0, 2 * Math.PI);
  • 绘制图像到画布。
    ctx.drawImage('./static/logo.png', 0, 0, 100, 100);
  • 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
    ctx.draw();
    参数reserve：非必填。本次绘制是否接着上一次绘制，即reserve参数为false，则在本次调用drawCanvas绘制之前native层应先清空画布再继续绘制；若reserver参数为true，则保留当前画布上的内容，本次调用drawCanvas绘制的内容覆盖在上面，默认 false
  • clip: 从原始画布中剪切任意形状和尺寸,一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。
    ctx.clip()
  • fillText: 在画布上绘制被填充的文本
    ctx.fillText('Hello', 20, 20)
  • 当前字体样式的属性
    ctx.font = '24px sans-serif';
  • 用于设置文字的水平对齐
    ctx.setTextBaseline('top');
  • 设置填充颜色
    ctx.setFillStyle('#fff');
  • 用于设置文字的对齐
    ctx.setTextAlign('right');

坐标

1、字体
1)左上角0，0 ，字体对齐，看不到时候调整字体对齐方式verticalAlign： top
2)字体水平居中，x 设置为宽度的一半，text-align: 设置为center