微信小程序canvas绘图功能小例子

最新推荐文章于 2025-09-24 16:20:18 发布

原创最新推荐文章于 2025-09-24 16:20:18 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #canvas

本文介绍了微信小程序中canvas的基本使用，包括设置canvas组件的宽高、创建canvas上下文、绘制线条、填充形状、添加文本、绘制圆形头像以及如何将canvas内容保存为图片。通过实例展示了canvas在小程序中的各种绘图功能。

canvas基本功能介绍

01canvas组件

在wxml页面直接使用canvas来调用组件，canvas的默认宽高为300px*225px，如果要使得画布根据屏幕尺寸变化，可以在js文件中利用getSystemInfo来获取系统宽高，也可自定义宽高（可在样式表中定义也可以直接使用行内样式）

<canvas canvas-id="ctx"></canvas><canvas style="width: 170px; height:170px;"  canvas-id="ctx"></canvas>

02创建对象 js页面

var ctx= wx.createCanvasContext("ctx")

03绘制线条

首先定位起始点，设置线条的颜色贺宽度，接着设置结束位置，调用线条绘制方法，最后调用绘图方法完成绘制。

 ctx.moveTo(0,0) ctx.setStrokeStyle('f00') ctx.setLineWidth(5) ctx.lineTo(100,200) ctx.stroke() ctx.draw()04绘制实心形状

先设置形状的填充颜色，调用方法进行形状绘制，需要指定开始坐标点和目标形状的宽高。

ctx.setFillStyle('blue')ctx.fillRect(10, 10, 150, 150)ctx.draw(true)

05绘制文本

可以设置文本的颜色和大小，调用方法设置文本和文本起始位置

ctx.setFontSize(20)ctx.fillText('MINA', 100, 100)ctx.draw(true)

06绘制圆形头像

canvas可以将多张图片绘制到画布上，调用drawimage方法即可，需要指定绘图开始位置和图片尺寸（非必须），如果是网络图片需要先下载到本地，利用裁剪功能会让当前画布发生变化，可以再裁剪之前先保存之前画布，裁剪完成之后再恢复即可。

wx.downloadFile({  url: 'http://is5.mzstatic.com/image/thumb/Purple128/v4/75/3b/90/753b907c-b7fb-5877-215a-759bd73691a4/source/50x50bb.jpg',  success: function(res) {    ctx.save()    ctx.beginPath()    ctx.arc(50, 50, 25, 0, 2*Math.PI)    ctx.clip()    ctx.drawImage(res.tempFilePath, 25, 25)    ctx.restore()    ctx.draw(true)  }})

07canvas保存为图片

绘图保存为图片，需要再draw方法中写回调函数，也可以利用下面的方法，根据canvasid来获取绘图临时路径，并保存到相册中。

savePic:function(){    setTimeout(function () {      wx.canvasToTempFilePath({        canvasId: 'ctx',        success: function (res) {          var tempFilePath = res.tempFilePath;          wx.saveImageToPhotosAlbum({            filePath: tempFilePath,            success(res) {              wx.showToast({                title: '保存成功',                icon: 'success'              })            }          })        },        fail: function (res) {          console.log(res);        }      });    }, 500);  },