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

最新推荐文章于 2025-03-12 11:36:29 发布

lily_808

最新推荐文章于 2025-03-12 11:36:29 发布

阅读量2.2k

点赞数

文章标签：小程序 canvas

本文链接：https://blog.youkuaiyun.com/lily_808/article/details/106317275

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)