收藏
回答

通过 SelectorQuery 获取 Canvas 节点,绘图问题?

<canvas
  type="2d"
  id="canvas"
  style="width: 100%; height: 500px;"
></canvas>
Page({
  data: {
 
  },
  onLoad: function() {
    // 通过 SelectorQuery 获取 Canvas 节点
    wx.createSelectorQuery()
      .select('#canvas')
      .fields({
        node: true,
      })
      .exec(this.init.bind(this))
  },
  init(res) {
    const canvas = res[0].node
    const ctx = canvas.getContext('2d')
    this.drawPath(ctx)
  },
  drawPath(ctx){
    var dwidth = 800 / 80.0;
    var pos = Math.ceil(Math.random() * 75) + 30;
    for (var i = 0; i < 80; i++) {
      ctx.beginPath();
      ctx.moveTo((i * dwidth), pos);
      var pos2 = Math.ceil(Math.random() * 75) + 30;
      ctx.lineTo(((i + 1) * dwidth), pos2);
      pos = pos2;
      ctx.stroke();
    }
    ctx.strokeStyle = "green";
    for (var i = 10; i < 80; i++) { //清除后半部份继续绘制
      ctx.clearRect((i * dwidth), 0, ((i + 1) * dwidth), 150);
      ctx.beginPath();
      ctx.moveTo((i * dwidth), pos);
      var pos2 = Math.ceil(Math.random() * 75) + 30;
      ctx.lineTo(((i + 1) * dwidth), pos2);
      pos = pos2;
      ctx.stroke();
    }
  }
   
})


开发工具中显示是清晰的,在真机预览是模糊的,麻烦帮忙看一下是哪里的问题?

回答关注问题邀请回答
收藏

3 个回答

  • 小程序技术专员-Eric
    小程序技术专员-Eric
    置顶回答2019-10-28

    要根据 dpr 设置一下 canvas 的宽高。默认宽高是 300x150,所以会变形。

    const dpr = wx.getSystemInfoSync().pixelRatio
    canvas.width = width * dpr
    canvas.height = height * dpr
    ctx.scale(dpr, dpr)


    2019-10-28
    有用
    回复 2
    • CONG
      CONG
      2019-10-30
      你好,空闲的时候帮我看一下问题,问题回复再下方了
      2019-10-30
      回复
    • phoenixor
      phoenixor
      03-12
      我这样设置了,画布650*650px,为什么画一个画布大小的圆还是变形了??
      03-12
      回复
  • 社区技术运营专员-灵芝
    社区技术运营专员-灵芝
    2019-10-28

    麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2019-10-28
    有用
    回复
  • CONG
    CONG
    2019-10-30

    根据 dpr 设置了 canvas 的宽高,但在画路径的时候还是线条还是会出现粗细不均的情况。

    微信版本:7.0.7 ,我用了华为mate20,和ipone5 测试

    ctx.lineWidth = 1.5; //设为小数线条粗细不均会更加明显

    断码片断: https://developers.weixin.qq.com/s/j54J2vmk7vcF

    在其它案例画时使用ctx.clearRect() 清楚区域会出现一些毛刺,麻烦帮忙查看是什么原因。



    2019-10-30
    有用
    回复
登录 后发表内容
问题标签