canvas显示设置了尺寸,为什么实际绘制时还是被错误了呢?

小程序 文章 2021-03-24 10:21 523 0 全屏看文

AI助手支持GPT4.0

canvas显示设置了尺寸,为什么实际绘制时还是被错误了呢?The canvas display has set the size, why is it wrong when actually drawing?

canvas显示设置了尺寸,为什么实际绘制时还是被错误了呢?

代码片段:https://developers.weixin.qq.com/s/OK1Ml2mN7jpQ

即使是显示设置了canvas的尺寸,为什么在实际绘制的时候那个圆还是被纵向被拉伸了?要怎么样才能既自定义canvas尺寸,还能保证绘制正确呢?谢谢!

Code snippet: https://developers.weixin.qq.com/s/OK1Ml2mN7jpQ Even if the canvas size is set for display, why is the circle stretched longitudinally when it is actually drawn? How to customize the canvas size and make sure the drawing is correct? thank you!

回答:

smileLife:

https://developers.weixin.qq.com/s/BrjeN2mH74po ,看看这个可以吗?

武曲心:

这个尺寸你得好好琢磨一下,有很多影响因素的,dpr也是对生成图片有影响的,开发时要适时通过ctx.scale缩放观察

drawInit() {

    this.createSelectorQuery()

      .select('#poster')

      .fields({

        node: true,

        size: true,

      })

      .exec(this.canvasInit.bind(this))

  },

canvasInit (res) {

    // const dpr = wx.getSystemInfoSync().pixelRatio

    const width = res[0].width * 2

    const height = res[0].height * 2


    this.canvasObj = res[0].node


    const ctx = this.canvasObj.getContext('2d')


    this.canvasObj.width = width

    this.canvasObj.height = height

    // ctx.scale(0.5, 0.5)


    this.drawCanvas(width, height)

  }

-EOF-

AI助手支持GPT4.0


国内超级便宜服务器

摸鱼人热门新闻聚合

钻级赞助商 我要加入

开发者在线工具

第三方支付技术请加QQ群

相关文章
小程序类型为IT科技,软件服务提供商,如何开通小程序直播 ?,没有支付记录
企业微信“联系我”访客添加流程问题
第三方平台提交代码成功,但是为什么获取体验版二维码,扫码打开的还是原来的小程序?之前都是ok的
"errcode":47001,"errmsg":"data format error rid" ?
iOS 端微信分享调用起微信后,直接返回APP并返回分享成功,实际操作中并没有分享成功
随便看看
企业微信通讯录账号被管理员误/恶意删除,怎么办? 8370
问题? 7486
如何快速搭建抽奖助手小程序(无需代码知识) 5162
许涛 大哥在吗, 要解冻小程序的时候提示信息主体不一致, 能帮忙看下吗? 6223
小程序搜一搜全称搜索不显示 麻烦解决一下!谢谢 5734
我的小程序广告收款主体是个体工商户,每个月邮寄两次发票很是麻烦,我年底的时候打包邮寄一次可以么? 5305
如何解决渲染层网络错误Failed to load media? 16655
小程序找号找回 释放昵称? 2596
我的小程序广告主收入5301,实际进账4406,是怎么回事呀? 2572
删除部分微信用户个人数据的通知,怎么删除? 5630