canvas的入门和动画

一.canvas是什么

cavans是Html中用来绘制图像的画布，通过javascript绘制几何图形，文字，图表等, 一般可以展示2D动画效果

以下用uniapp的canvas作为实例，其实基本思路与Html中的差不多

二.uniapp的canvas的基本绘制技巧

1. 基本使用

（1）Canvas 组件

<canvas canvas-id="myCanvas" class="canvas"></canvas>

（2）Canvas 上下文
uni.createCanvasContext(canvasId) 来获取 CanvasContext。

（3）必须调用 ctx.draw()

ctx.fillRect(10, 10, 100, 100); // 画矩形
ctx.draw(); // 确保绘制生效

通过 uni.createCanvasContext() 获取的上下文对象支持多种绘图操作，包括：
绘制矩形（fillRect、strokeRect），其实就是（rect + fill和 rect + stroke）， 有fill就是填充，stroke就是描边
绘制圆形 arc(x, y,r, sAngle, eAngle, counterclockwise)
绘制文本（fillText、strokeText）
图片（drawImage）
设置样式（setFillStyle、setStrokeStyle、setLineWidth 等）
起始一条路径，或重置当前路径(beginPath)
创建从当前点回到起始点的路径（closePath）

2. 绘制矩形

// 绘制填充的矩形
const ctx = uni.createCanvasContext('myCanvas');
ctx.setFillStyle('blue'); // 设置填充颜色
ctx.fillRect(50, 50, 150, 100); // 画一个矩形，
ctx.draw(); // 触发绘制

// 绘制描边的矩形
// ctx.setStrokeStyle('red');
// ctx.setLineWidth(5);  // 设置线条宽度
// 开始绘制矩形路径
// ctx.beginPath();
// ctx.rect(20, 20, 150, 100);  // 绘制矩形
// ctx.stroke();  // 描边矩形的边缘
// ctx.draw();  // 更新画布

3. 绘制线条

 const ctx = uni.createCanvasContext('myCanvas');
  ctx.setStrokeStyle('green'); // 线条颜色
  ctx.setLineWidth(5); // 线条宽度
  ctx.moveTo(50, 50); // 起点
  ctx.lineTo(200, 200); // 终点
  ctx.stroke(); // 绘制路径
  ctx.draw();

4. 绘制圆形

 const ctx = uni.createCanvasContext('myCanvas');
  ctx.setFillStyle('green');
  ctx.beginPath();
  ctx.arc(150, 150, 50, 0, 2 * Math.PI); // 画圆
  ctx.fill();
  ctx.draw();

5. 绘制文本

  const ctx = uni.createCanvasContext('myCanvas');
  ctx.setFontSize(20); // 设置字体大小
  ctx.setFillStyle('black'); // 设置字体颜色
  ctx.fillText('Hello UniApp!', 50, 100); // 绘制文本
  ctx.draw();

6. 绘制图片

 const ctx = uni.createCanvasContext('myCanvas');

  ctx.drawImage('/static/logo.png', 50, 50, 100, 100); // 绘制图片
  ctx.draw();

三. 注意

1. canvas上下文获取时间

onReady 触发时，canvas 组件已经创建，uni.createCanvasContext('canvasId') 可以正常使用。
在组件内可以使用 mounted() 进行初始化

2. draw

draw() 方法接受两个参数：
reserve：可选参数，类型为布尔值。如果为 true，则保留当前的绘图上下文，之后再次调用 draw() 方法时，会在之前绘制的内容基础上继续绘制；如果为 false 或不传入该参数，则每次调用 draw() 方法时会清空之前的绘图上下文，重新开始绘制。默认值为 false。
callback：可选参数，类型为函数。当绘制完成后会调用该回调函数，可用于处理绘制完成后的逻辑

3. 是否使用renderjs

如果 canvas 的绘制逻辑简单，对性能要求不是特别高，或者绘制操作不频繁，那么可以不使用 Renderjs。例如只是绘制一些静态的图形，如简单的矩形、圆形等，并且不需要实时更新。

四. 例子

https://gitee.com/yao_zhongqiang/study_git/tree/canvas
绘制几何图形 testCanvas
点击绘制多边形，可拖动节点 testMovePolygons
在多边形中拖动切割线 canvasMove