微信小程序canvas画布不清晰解决方法

绘制的图片，文字等十分模糊

添加以下代码,通过设置分辨率来解决

 const dpr = wx.getSystemInfoSync().pixelRatiocanvas.width = res[0].width * dprcanvas.height = res[0].height * dprctx.scale(dpr, dpr)

完整代码：

<!-- canvas.wxml -->
<canvas type="2d" id="myCanvas"></canvas>

// canvas.js
Page({onReady() {const query = wx.createSelectorQuery()query.select('#myCanvas').fields({ node: true, size: true }).exec((res) => {const canvas = res[0].nodeconst ctx = canvas.getContext('2d')//添加这些代码，通过分辨率重新设置const dpr = wx.getSystemInfoSync().pixelRatiocanvas.width = res[0].width * dprcanvas.height = res[0].height * dprctx.scale(dpr, dpr)ctx.fillRect(0, 0, 100, 100)})}
})

吐槽一下，官方不做说明，折腾半天

微信小程序canvas画布不清晰解决方法相关推荐

微信小程序Canvas卡顿优化解决方法
文章目录一.引入二.分析问题三.解决方法四.解决后效果图五.绘制好的地图一.引入原安卓图书馆选座项目CSDN博客链接: Android图书馆选座系统课程设计最近在搞微信小程序,想把以前 ...
Taro开发微信小程序遇到的问题和解决方法
Taro开发微信小程序遇到的问题和解决方法参考文章: (1)Taro开发微信小程序遇到的问题和解决方法 (2)https://www.cnblogs.com/wuliujun521/p/114753 ...
微信小程序canvas画布新接口type为2D时drawImage方法的使用以及注意事项
微信小程序canvas画布自2.9.0 起支持一套新 Canvas 2D 接口(需指定 type 属性),但文档不全,从原canvas的api转变到新的api时遇到不少问题,现将新版与旧版的画布载入图 ...
微信小程序 canvas画布渲染云存储的图片
[已解决]问题: 在云开发小程序过程种,用canvas画布渲染云存储的图片,发现不能显示.用http带头的网络图片是可以显示的,用cloud带头的云存储图片就是不行.http带头的网络图片可以展示, ...
微信小程序开发中常见问题及解决方法
本文章总结小程序开发中常见的错误问题.希望能帮助初学者少走弯路,避免类似的错误. 1:出现"脚本错误或者未正确调用Page()"的错误提示. 解决方法:出现这个错误的原因通常是因为 ...
微信小程序异步转同步的解决方法
一.前言二. promise的概念三.promise的使用四.一个因为异步请求出问题的案例五.案例的解决方案 1.运用promise解决异步转同步问题 2.运用async+await+prom ...
微信小程序用户未授权bug解决方法，微信小程序获取用户信息失败解决方法
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: bug示例图: 导致这个bug的原因是 wx.getUserInfo(OBJECT) 接口做了调整: ...
微信小程序包体积过大解决方法
因为微信开发者工具提交需要整个项目大小不超过2M,超过2M则不能提交,会出现下面这个报错解决方法: 1.在Hbuilder x上面勾选上运行时压缩代码 2.分包操作在pages.json文件中设置 ...
微信小程序Canvas画布绘制以及保存
<canvas canvas-id="firstCanvas" style="width: 320px;height: 500px;" bindlongt ...

微信小程序canvas画布不清晰解决方法

微信小程序canvas画布不清晰解决方法相关推荐

最新文章

热门文章