canvas

最新推荐文章于 2024-07-26 08:43:38 发布

qq_43919485

最新推荐文章于 2024-07-26 08:43:38 发布

阅读量149

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_43919485/article/details/115048679

版权

本文介绍了如何在微信小程序中利用canvas进行图形绘制，包括获取画布、画圆、使用drawImage和clip裁剪图片为圆形头像、绘制文字和图片。特别指出，绘制顺序决定了图层的上下关系，先绘制的图形会被后绘制的覆盖。

摘要由CSDN通过智能技术生成

wxml

 <canvas type="2d" id="myCanvas" style="height:1300rpx;width:710rpx;position: fixed;top:20rpx;left:20rpx;box-sizing: border-box;z-index:3"  v-show="canvasShow"></canvas>

js
第一步：获取画布

        const query = wx.createSelectorQuery()
        query.select('#myCanvas')
          .fields({ node: true, size: true })
          .exec((res) => {
            const canvas = res[0].node
            var ctx = canvas.getContext('2d')
            canvas.width = 710  
            canvas.height = 1300
            canvas.x = 0
            canvas.y = 0
          })

第二步：开始画图

1、画圆

// 开始绘制路径
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = 'red';
// 绘制圆的路径**
ctx.arc(100, 100, 50, 0, Math.PI * 2, false);

// 0°是从三点钟方向开始的

// 描边路径
ctx.stroke();