小程序使用canvas2d，使用中遇到的难点及解决方法。

<canvas  type="2d" id="myCanvas" style="width:370px;height:260px"></canvas>

简单使用canvas标签，其中还不支持在标签内使用width和height，画布默认300 * 150，可更改样式width，height，但未进行画布尺寸的长和宽匹配会导致绘制图形被拉长，变形。小程序canvas2d默认会保存上次绘制的图像，不用调用draw(true)就有这种效果。注意使用canvas.width和canvas.height，会导致重绘而失去这种效果。

简单绘制一段线条，context.moveTo为绘制的起点，context.lineTo下一个点，context.stroke()连接两个点构成线段。

 const query = wx.createSelectorQuery()
      query.select('#myCanvas')
        .fields({ node: true, size: true })
        .exec((res) => {
            const canvas = res[0].node
            const context = canvas.getContext('2d')
            
            context.moveTo(X, Y)
            context.lineTo(X, Y)
            context.lineTo(X, Y)

            context.stroke()
        }

针对画布太小导致的绘制出来的清晰度不够,可设置画布的width，height尺寸，并调整缩放量使清晰度上升。

const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
context.scale(dpr, dpr)

但是上面做法又会引起画布重绘，更改了画布的width、height会清空上一次的绘制，解决方法：先拷贝上一次画布，再进行调整画布宽高，改变完宽高后，重绘画布

let canvasData = context.getImageData(0, 0, canvas.width, canvas.height);

canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
context.scale(dpr, dpr)

context.putImageData(canvasData, 0, 0)

最后

以上就是淡淡乐曲为你收集整理的小程序使用canvas2d，使用中遇到的难点及解决方法。的全部内容，希望文章能够帮你解决小程序使用canvas2d，使用中遇到的难点及解决方法。所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。