微信小程序canvas画布绘制矩形、椭（圆）、直线、文字

共15个文件

json：6个

js：4个

wxss：3个

需积分: 5 15 浏览量 2024-01-09 19:18:34 上传评论 2 收藏 9KB ZIP 举报

在微信小程序中，Canvas是一个非常重要的组件，它允许开发者在界面上进行动态图形绘制，创造出丰富的视觉效果。本文将深入探讨如何使用Canvas API在微信小程序中绘制矩形、椭圆、直线以及添加文字。我们需要在小程序的页面JSON配置文件中引入Canvas组件，并在对应的WXML文件中进行布局。例如： ```json { "component": true, "usingComponents": { "canvas": "@ wxcc/canvas" } } ``` ```html <canvas id="myCanvas" canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas> ``` 接下来，我们将主要介绍如何在JavaScript文件中使用Canvas API进行图形绘制。 1. 绘制矩形：使用`ctx.fillRect()`和`ctx.strokeRect()`方法可以绘制填充矩形和边框矩形。例如： ```javascript wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true, }).exec((res) => { const canvas = res[0].node; const ctx = canvas.getContext('2d'); // 填充矩形 ctx.fillStyle = 'blue'; ctx.fillRect(50, 50, 100, 100); // 边框矩形 ctx.strokeStyle = 'red'; ctx.lineWidth = 2; ctx.strokeRect(70, 70, 80, 80); }); ``` 这段代码会在Canvas上绘制一个蓝色填充的矩形和一个红色边框的矩形。 2. 绘制椭圆（圆）：微信小程序的Canvas API没有直接提供绘制椭圆的方法，但可以通过绘制多个弧线来实现。绘制圆形可以使用`ctx.arc()`方法。例如： ```javascript // 绘制圆形 ctx.beginPath(); ctx.fillStyle = 'green'; ctx.arc(200, 150, 50, 0, Math.PI * 2, false); // 圆心坐标、半径、起始角度、结束角度、是否逆时针 ctx.fill(); ``` 3. 绘制直线：使用`ctx.moveTo()`定义起点，`ctx.lineTo()`定义终点，然后调用`ctx.stroke()`绘制直线。例如： ```javascript // 绘制直线 ctx.beginPath(); ctx.strokeStyle = 'yellow'; ctx.lineWidth = 3; ctx.moveTo(50, 150); ctx.lineTo(250, 150); ctx.stroke(); ``` 4. 添加文字： `ctx.fillText()`和`ctx.strokeText()`用于在Canvas上填充和描边文本。例如： ```javascript // 添加文字 ctx.font = 'bold 20px Arial'; // 设置字体样式 ctx.fillStyle = 'orange'; ctx.fillText('Hello, World!', 100, 200); ctx.strokeStyle = 'purple'; ctx.strokeText('Hello, World!', 100, 200); ``` 以上就是微信小程序中使用Canvas绘制矩形、椭圆、直线和文字的基本操作。在实际开发中，还可以结合动画、事件处理等，创建出更加复杂和交互式的图形界面。记得在完成绘制后，使用`wx.canvasToTempFilePath()`方法将Canvas内容转换为图片，以便于保存或分享。同时，注意对不同尺寸屏幕的适配，确保图形在不同设备上都能正常显示。

资源推荐

资源详情

资源评论

收起资源包目录

微信小程序canvas绘制基本图形.zip （15个子文件）

练习

sitemap.json 201B

project.private.config.json 361B

pages

index

index.wxml 505B

index.js 2KB

index.json 96B

index.wxss 533B

.eslintrc.js 587B

app.json 480B

project.config.json 567B

app.js 18B

app.wxss 194B

components

navigation-bar

navigation-bar.wxss 4KB

navigation-bar.js 2KB

navigation-bar.wxml 2KB

navigation-bar.json 84B

// index.js Page({ data:{ }, onReady(e){ const query = wx.createSelectorQuery() query.select('#myCanvas') .fields({ node: true, size: true }) .exec((res) => { const canvas = res[0].node const ctx = canvas.getContext('2d') const dpr = wx.getSystemInfoSync().pixelRatio this.setData({ pixelRatio: dpr }) canvas.width = res[0].width * dpr canvas.height = res[0].height * dpr this.setData({ canvas: canvas, ctx: ctx, }) }) }, draw_basic_ele_check(e){ var ctx = this.data.ctx switch(e.currentTarget.dataset.info){ case 'rectangle': ctx.strokeRect(100,100,100,100) var t_edit = { left_top_x: 100, left_top_y: 100, width: 100, height: 100, } this.setData({ edit_rect: t_edit, }) break case 'circle': ctx.beginPath() ctx.ellipse(80,80,50,50,0,0,Math.PI*2) ctx.stroke() var t_edit = { center_x: 80, center_y: 80, v_radius: 50, h_radius: 50, } this.setData({ edit_circle: t_edit, }) break case 'line': ctx.beginPath() ctx.moveTo(50,10) ctx.lineTo(50,110) ctx.closePath() ctx.stroke() var t_edit = { x1: 50, y1: 10, x2: 50, y2: 110, } this.setData({ edit_line: t_edit, }) break case 'text': wx.showModal({ editable: true, placeholderText: '请输入内容...' }) .then(res=>{ if (res.confirm && res.content!="") { ctx.font = "50px Sans-Serif" ctx.fillStyle = "black" ctx.fillText(res.content,100,100) var t_edit = { content: res.content, left_top_x: 100, left_top_y: 100-50, width: this.data.ctx.measureText(res.content).width, height: 50, } this.setData({ edit_text: t_edit, }) } }) .catch(res=>{ console.log('error',res) }) break default: console.log('error') } }, })

评论收藏

内容反馈