收藏
回答

ctx.fillRect()设置了两个矩形区域,第二个的宽高没有生效,而是自动填满了剩下的宽高?

html

wx.createSelectorQuery()

      .select("#myCanvas") // 在 WXML 中填入的 id

      .fields({ node: true, size: true })

      .exec((res) => {

        const canvas = res[0].node;

        const renderWidth = res[0].width;

        const renderHeight = res[0].height;

        const ctx = canvas.getContext("2d");

        const dpr = wx.getWindowInfo().pixelRatio;

        canvas.width = 187.5 * dpr;

        canvas.height = 196 * dpr;

        ctx.scale(dpr, dpr);

//第一个矩形,宽高是正常的

        ctx.fillStyle = "#ff3435";

        ctx.fillRect(0, 0, 187.5 * dpr, 196 * dpr);

        //第二个矩形,预期是w335,h332,实际输出后的效果见附图

        ctx.fillStyle = "#FFFFFF";

        ctx.fillRect(10, 15, 167.5 * dpr, 166 * dpr);

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

1 个回答

  • Jerry
    Jerry
    2023-09-18

    你把第二个矩形的宽高从小到大试一下就知道你的问题在哪里了

    2023-09-18
    有用 1
    回复 8
    • zw
      zw
      2023-09-18
      可以了,倍数的问题,是4倍的关系,我之前用的是2倍
      2023-09-18
      回复
    • zw
      zw
      2023-09-19
      const himage = canvas.createImage();
              himage.src =
                "https://sit-ie-uocs-core-shenzhen-xili1-oss.sit.sf-express.com/v1.2/AUTH_sit-IE-UOCS-CORE/sfosspublic001/applet/banner/1695028323388-DEEQAVToralPH1MW6KM%2BMhTE%2FuV7k%3D.png";
              himage.onload = (res) => {
                ctx.drawImage(himage, 10, 20, 30 * dpr, 5 * dpr);
              };
      wx.canvasToTempFilePath({
                canvas: canvas, 
                success(res) {
                  wx.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath,
                    success(res) {
                      console.log("ok");
                    },
                  });
                },
              });
      大佬,就是我再画布上画了一张图,就是在画布上能显示,但是保存到本地的时候就没有了,也没有报错,不知道错在哪里
      2023-09-19
      回复
    • Jerry
      Jerry
      2023-09-19回复zw
      wx.canvasToTempFilePath放到himage.onload里面试试
      2023-09-19
      1
      回复
    • zw
      zw
      2023-09-19回复Jerry
      大佬,可以了,厉害
      2023-09-19
      回复
    • zw
      zw
      2023-09-19
      如果有2 张图应该怎么处理呢,我加了一段代码,但是只能显示himage.onload中的himage这张图片了
      2023-09-19
      回复
    查看更多(3)
登录 后发表内容