踩不完的微信小程序的坑之【ctx.drawImage 绘制的画布，使用ctx.clearRect清除不了】

最新推荐文章于 2024-08-15 10:09:56 发布

Dove言和

最新推荐文章于 2024-08-15 10:09:56 发布

阅读量6.9k

点赞数

分类专栏：微信小程序实战全记录文章标签： canvas画布 clearRect

本文为博主原创文章，未经博主允许不得镜像、转载。

本文链接：https://blog.csdn.net/qq_21041889/article/details/97804639

版权

微信小程序实战全记录专栏收录该内容

93 篇文章 151 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文探讨了在微信小程序中遇到的一个棘手问题：使用`ctx.clearRect()`无法清除由`ctx.drawImage`绘制的画布内容。尽管`clearRect`按预期在模拟器上工作，但在真机上可能无效。`CanvasContext.draw()`的`reserve`参数至关重要，当设置为`false`时，会先清空画布再进行绘制，而`true`则相反。解决这个问题需要深入理解这些API的行为，以确保在所有设备上正确清除画布。

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

canvasContext.clearRect

定义

清除画布上在该矩形区域内的内容。

Tip: clearRect 并非画一个白色的矩形在地址区域，而是清空

举个栗子：

<canvas canvas-id="myCanvas" style="border: 1px solid; background: #123456;"/>

参数

参数	类型	说明
x	Number	矩形区域左上角的x坐标
y	Number	矩形区域左上角的y坐标
width	Number	矩形区域的宽度
height	Number	矩形区域的高度

在电脑模拟器上，以下代码是可以的

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Dove言和

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

订阅专栏

微信小游戏中three.js离屏画布的示例代码

10-14

在微信小游戏中，开发者常利用Three.js库来创建引人入胜的3D交互体验。Three.js是一个基于WebGL的JavaScript库，它简化了在浏览器中进行3D图形编程的过程。离屏画布（OffscreenCanvas）技术在Three.js中的应用，主要...

canvas擦除功能—圆形橡皮擦

weixin_44434938的博客

03-26

1557

canvas擦除功能—圆形橡皮擦

参与评论您还未登录，请先登录后发表或查看评论

微信小程序canvas.drawImage完全显示图片问题的解决

10-17

主要介绍了微信小程序canvas.drawImage完全显示图片问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

微信小程序分享码乱码，drawImage操作 base64 图片

最新发布

qq_45399948的博客

08-15

176

access_token是公众号的全局唯一接口调用凭据。1.首先获取access_token。

微信小程序开发—(十)drawImage理解

汉堡请不要欺负面条

05-05

1万+

一.drawImage参数二.使用案例 1.上传图片时： chooseImage是调用相机和手机相册的接口 2.绘制指定的图片(图片直接在小程序的images文件夹中） const ctx = wx.createCanvasContext('myCanvas'); ctx.drawImage('../uploads/foods.jpg', 0, 0, 150, 1

HTML5 Canvas clearRect無法清除問題

u011740841的专栏

07-13

4584

1.clearRect无法清除指定区域在应用中会定时重绘Canvas，每次都绘制之前都会用clearRect，将整个Canvas内容清除。刚开始运行时，还没有问题，大概运行了1个小时后就会出现内容无法清除的情况，暂时没有找到原因。在上面的那个回答中提到了重设Canvas的大小会清除原来绘制的内容，所以就采用了下面的方式： var context = docu

小程序中的drawImage

luojingonline的博客

03-28

1万+

昨天夜里看着微信的推送通知，小程序新功能，个人可以申请小程序，公众号自定义菜单可以打开小程序……又是开心又是难过，开心小程序的不断发展，难过小程序的不够完善，个人自开发以来，处处踩坑，canvas也是大家用到的比较少的东西，所以耗了不少时间。切入主题。在html里如果要画一张图，要用img.onload监听图片加载完成以后才能操作，另外画图的过程中还存在着图片跨域的问题。查了一下文档

HTML5之drawImage函数

EmotionComputer

04-18

1万+

可用函数 drawImage(image, x, y) //按原图片大小绘制。 drawImage(image, x, y, width, height) //按指定大小绘制。 drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight) //常

微信小程序开发.pdf

06-12

在微信小程序开发过程中，绘图API扮演着至关重要的角色，它提供了丰富的图形绘制能力，包括但不限于矩形、路径、圆弧、文字和图片的绘制，以及各种绘图设置和变形操作。以下是对这些知识点的详细解释： ### 绘图...

微信小程序之Canvas--玩坏FlappyBird

03-29

说点：小程序平台，玩过五子棋，玩过贪吃蛇，你玩过FlappyBird吗？效果图： (此图片来源于网络，如有侵权，请联系删除! ) 实现细节： JS逻辑: 主要包括小鸟下降逻辑、随机空隙管道逻辑、单机屏幕事件、...

小程序中canvas的drawImage方法参数使用详解

10-16

主要介绍了小程序中canvas的drawImage方法参数使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

微信小程序开发.docx

06-12

在微信小程序中，你可以使用`Ctx`对象提供的方法来绘制矩形。`Ctx.rect(x1, y1, x2, y2)`用于绘制一个路径矩形，而`Ctx.fillRect(x1, y1, x2, y2)`和`Ctx.strokeRect(x1, y1, x2, y2)`分别用于绘制填充的和空心的...

canvas 无法清空画布问题

weixin_40254430的博客

10-18

2810

<canvas id="canvas"></canvas> <script type="text/javascript"> var canvas=document.getElementById("canvas"); var ctx=canvas.getCont..

canvas 绘制图片 - ctx.drawImage()

qq_44408319的博客

07-19

1万+

canvas绘制图片

小程序基本命令

aiven1637的博客

10-30

3314

onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...

java的drawimage_canvas中的drawImage

weixin_39614094的博客

02-20

923

一、在canvas画布中如何加载图片---用drawImage( )方法drawImage用法的三种情况：1、在画布指定位置定义图像ctx.drawImage(img,x,y);注：此时画布上显示的图片大小是图片的默认大小2、在画布上定位图像，并规定图像的宽度和高度：ctx.drawImage(img,x,y,width,height);3、剪切图像，并在画布上定位被剪切的部分：ctx.drawI...

canvas的drawImage方法参数详解

热门推荐

编程界明世隐的博客

03-12

3万+

引言： canvas很有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景，以及游戏界面（Sprites）等等。浏览器支持的任意格式的外部图片都可以使用，比如PNG、GIF或者JPEG。你甚至可以将同一个页面中其他canvas元素生成的图片作为图片源。一旦获得了源图对象，我们就可以使用drawImage方法将它渲染到 canvas 里。 drawImage方法有三种形态： drawImage(image, dx, dy) 在画布指定位置绘制原图 drawImage(i...

把下面的代码改成可以在微信小程序中运行的函数getCanvasImg(path, w, h, q) { return new Promise((resolve, reject) => { var _ = this; const ctx = Taro.createCanvasContext('myCanvas'); ctx.clearRect(0, 0, w, h); ctx.drawImage(path, 0, 0, w, h); ctx.draw(false, function () { .timer = setTimeout(() => { Taro.canvasToTempFilePath({ canvasId: 'myCanvas', fileType: 'jpg', quality: q, destWidth: w, destHeight: h, success: function success(res) { .setState({ imagePath:res.tempFilePath }) clearTimeout(.timer) resolve(res.tempFilePath) }, fail: function (e) { clearTimeout(.timer) Taro.showModal({ title: '提示', content: JSON.stringify(e), }) reject(e) } }); }, 500) }); }) }

05-27

可以参考下面的代码将其改成在微信小程序中可运行的函数： ``` function getCanvasImg(path, w, h, q) { return new Promise((resolve, reject) => { const ctx = wx.createCanvasContext('myCanvas'); ctx.clearRect(0, 0, w, h); ctx.drawImage(path, 0, 0, w, h); ctx.draw(false, function () { let timer = setTimeout(() => { wx.canvasToTempFilePath({ canvasId: 'myCanvas', fileType: 'jpg', quality: q, destWidth: w, destHeight: h, success: function success(res) { clearTimeout(timer); resolve(res.tempFilePath); }, fail: function (e) { clearTimeout(timer); wx.showModal({ title: '提示', content: JSON.stringify(e), }); reject(e); } }); }, 500); }); }); } ``` 主要的修改包括： 1. 将 `Taro` 改成 `wx`，因为 `createCanvasContext` 和 `canvasToTempFilePath` 是微信小程序提供的 API。 2. 将 `setState` 改成普通的变量赋值操作。 3. 将 `this.timer` 改成 `let timer`，因为在微信小程序中不支持将定时器挂在 `this` 上。 4. 将 `Taro.showModal` 改成 `wx.showModal`，因为在微信小程序中没有 `Taro.showModal` 这个 API。