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

小程序 文章 2021-03-24 10:21 620 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群

相关文章
建议群变更回调事件返回更详细的信息
微信小游戏使用wx.addCard()领取卡券功能,报errMsg: "addCard:fail?
为什么使用map数组方法突然报错?之前不会报错
怎么开通小程序直播?
微信插件方面的问题?
随便看看
教育科技公司申请微信支付被拒绝? 4799
微信公众号免300认证教程 5892
小程序已经上线,作为管理员无法在小程序数据助手查看数据? 5299
小程序广告组件通过审核,但是小程序内没有显示广告? 5067
企业微信通讯录账号被管理员误/恶意删除,怎么办? 9568
问题? 9048
如何快速搭建抽奖助手小程序(无需代码知识) 6177
许涛 大哥在吗, 要解冻小程序的时候提示信息主体不一致, 能帮忙看下吗? 7472
小程序搜一搜全称搜索不显示 麻烦解决一下!谢谢 6793
我的小程序广告收款主体是个体工商户,每个月邮寄两次发票很是麻烦,我年底的时候打包邮寄一次可以么? 6128