微信小程序canvas完全攻略
一、canvas的基本概念与使用
canvas是HTML5中新增的标签，它是用来绘制图形的容器，可以用于绘制简单的几何图形、图像、文字等
使用步骤如下：
const ctx = wx.createCanvasContext('canvas');
ctx.setStrokeStyle('#000');
ctx.setLineWidth(1);
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.stroke();
以上代码绘制了一条从(20,20)到(20,100)的黑色直线。其中，createCanvasContext()用于创建画布上下文，setStrokeStyle()设置画笔颜色，setLineWidth()设置画笔宽度，moveTo()移动画笔到指定位置，lineTo()绘制直线，stroke()渲染画布。
二、canvas的事件监听与交互
canvas中也可以添加事件监听，以实现交互效果。常用的事件有：
touchstart：手指开始触摸屏幕触发的事件。 touchmove：手指在屏幕上移动触发的事件。 touchend：手指从屏幕上离开触发的事件。使用步骤如下：
touchStart(e){
console.log(e.touches[0].x, e.touches[0].y)
}
touchMove(e){
console.log(e.touches[0].x, e.touches[0].y)
}
touchEnd(e){
console.log(e.changedTouches[0].x, e.changedTouches[0].y)
}
以上代码演示了在canvas上监听touch事件，并在控制台输出手指的坐标。其中，bindtouchstart、bindtouchmove、bindtouchend分别是touchstart、touchmove、touchend的事件绑定。
三、canvas的图形绘制
canvas可以用于绘制复杂的图形，如矩形、圆形、文字、图像等。下面以矩形和圆形为例：
const ctx = wx.createCanvasContext('canvas');
ctx.setStrokeStyle('#000');
ctx.setLineWidth(1);
ctx.rect(20, 20, 100, 50);// 绘制矩形
ctx.fill();// 填充矩形
ctx.arc(70, 70, 50, 0, 2 * Math.PI);// 绘制圆形
ctx.stroke();// 绘制圆形
以上代码绘制了一个左上角坐标为(20,20)、宽100、高50的矩形和一个圆心坐标为(70,70)、半径50的圆形。其中，rect()用于绘制矩形，fill()用于填充矩形，arc()用于绘制圆形，stroke()用于绘制圆形的轮廓线。
四、canvas的图像处理与动画绘制
canvas可以用于对图像进行处理和动画的绘制。下面以图片的裁剪和动画的绘制为例：
const ctx = wx.createCanvasContext('canvas');
wx.downloadFile({
url: 'https://example.com/test.png',
success: function(res) {
ctx.drawImage(res.tempFilePath, 0, 0, 100, 100, 0, 0, 50, 50);// 裁剪图片
ctx.draw();
setInterval(() => {
ctx.clearRect(0, 0, 300, 300);// 清除画布
ctx.drawImage(res.tempFilePath, x, y);// 绘制图片
x += 10;
y += 10;
ctx.draw();
}, 100);
}
})
以上代码演示了对图片进行裁剪和动画的绘制。其中，downloadFile()用于下载图片，drawImage()用于绘制图片，clearRect()用于清除画布，setInterval()用于绘制动画。
五、canvas的常见问题与解决方案
在使用canvas的过程中，常见的问题有画布不显示、绘制出错等。这些问题的解决方案如下：
画布不显示：请检查canvas标签的宽高是否设置正确，并可以尝试增加canvas的层级。 绘制错误：请检查所用代码是否正确，是否按照正确的顺序绘制。六、代码示例
const ctx = wx.createCanvasContext('canvas');
ctx.setStrokeStyle('#000');
ctx.setLineWidth(1);
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.stroke();
wx.downloadFile({
url: 'https://example.com/test.png',
success: function(res) {
ctx.drawImage(res.tempFilePath, 0, 0, 100, 100, 0, 0, 50, 50);
ctx.draw();
setInterval(() => {
ctx.clearRect(0, 0, 300, 300);
ctx.drawImage(res.tempFilePath, x, y);
x += 10;
y += 10;
ctx.draw();
}, 100);
}
})
