微信小程序中canvas不会显示

Question

根据一个实例改造成微信小程序里的canvas 但是浏览器中可以显示，但是小程序中不会显示（具体就是什么东西都没有 还是一个空的块）

这里是小程序中的canvas部分代码

   var ctx = wx.createCanvasContext('firstCanvas');

    console.log(ctx)
    ctx.width = 414;
    ctx.height = 700;

    const TAU = 2 * Math.PI;

    var times = [];
    function loop() {
      // console.log(ctx.width,ctx.height)
      //  clearRect 1
      ctx.clearRect(0, 0, ctx.width, ctx.height);
      update();
      draw();
      var timer = setTimeout(function () {
        loop();
        clearTimeout(timer);
      }, 2000)
    }

    function Ball(startX, startY, startVelX, startVelY) {      
      this.x = startX || Math.random() * ctx.width;
      this.y = startY || Math.random() * ctx.height;
      this.vel = {
        x: startVelX || Math.random() * 2 - 1,
        y: startVelY || Math.random() * 2 - 1
      };
      this.update = function (ctx) {

        if (this.x > ctx.width + 50 || this.x < -50) {
          this.vel.x = -this.vel.x;
        }
        if (this.y > ctx.height + 50 || this.y < -50) {
          this.vel.y = -this.vel.y;
        }
        this.x += this.vel.x;
        this.y += this.vel.y;
      };
      // 画圆
      this.draw = function (ctx) {
        ctx.beginPath();
        ctx.setGlobalAlpha(0.4);
        ctx.setFillStyle('#333333');
        ctx.arc((0.5 + this.x) | 0, (0.5 + this.y) | 0, 3, 0, TAU, false);
        ctx.fill();
      }
    }

    var balls = [];

    for (var i = 0; i < ctx.width * ctx.height / (65 * 65); i++) {
      balls.push(new Ball(Math.random() * ctx.width, Math.random() * ctx.height));
      // console.log(balls);
    }

    var lastTime = Date.now();
    function update() {
      var diff = Date.now() - lastTime;
      // console.log(diff);
      for (let frame = 0; frame * 16.6667 < diff; frame++) {
        for (let index = 0; index < balls.length; index++) {
          // 这里好像有问题
          balls[index].update(ctx);
        }
      }

      lastTime = Date.now();
    
  }

    function draw() {
      ctx.setGlobalAlpha(1);
      ctx.setFillStyle('#ffffff');
      // console.log(ctx.width,ctx.height)
      ctx.fillRect(0, 0, ctx.width, ctx.height);
  
      for (let index = 0; index < balls.length; index++) {
        let ball = balls[index];
        ball.draw(ctx);
        ctx.beginPath();
        for (let index2 = balls.length - 1; index2 > index; index2 += -1) {
          var ball2 = balls[index2];
          var dist = Math.hypot(ball.x - ball2.x, ball.y - ball2.y);
          if (dist < 100) {
            ctx.setStrokeStyle("#bbbbbb");
            // ctx.setGlobalAlpha(1 - (dist > 100 ? .8 : dist / 150));
            ctx.setGlobalAlpha(1-dist/150);
            ctx.setLineWidth(1);
            ctx.moveTo((0.5 + ball.x) | 0, (0.5 + ball.y) | 0);
            ctx.lineTo((0.5 + ball2.x) | 0, (0.5 + ball2.y) | 0);
          }
        }
        ctx.stroke();
      }
    }

    // Start
    
    loop();

这里是原来的canvas代码（经过一部分修改，但是能正常在浏览器中运行）

            var canvas = document.querySelector("canvas");
                //canvas.width = window.innerWidth;
                //canvas.height = window.innerHeight;
                
                var ctx = canvas.getContext("2d");
                ctx.width = 414;
                ctx.height = 700;
                console.log(ctx)
                var TAU = 2 * Math.PI;

                times = [];
                function loop() {
                ctx.clearRect(0, 0, ctx.width, ctx.height);
                update();
                draw();
                let timer = setTimeout(function(){
                    loop();
                    clearTimeout(timer);
                },1000)
                // requestAnimationFrame(loop);
                }
                
                function Ball (startX, startY, startVelX, startVelY) {
                    this.x = startX || Math.random() * ctx.width;
                    this.y = startY || Math.random() * ctx.height;
                    this.vel = {
                        x: startVelX || Math.random() * 2 - 1,
                        y: startVelY || Math.random() * 2 - 1
                    };
                    this.update = function(ctx) {
                        if (this.x > ctx.width + 50 || this.x < -50) {
                        this.vel.x = -this.vel.x;
                        }
                        if (this.y > ctx.height + 50 || this.y < -50) {
                        this.vel.y = -this.vel.y;
                        }
                        this.x += this.vel.x;
                        this.y += this.vel.y;
                    };
                    this.draw = function(ctx) {
                        console.log('draw')
                        ctx.beginPath();
                        ctx.globalAlpha = .4;
                        ctx.fillStyle = '#333';
                        ctx.arc((0.5 + this.x) | 0, (0.5 + this.y) | 0, 3, 0, TAU, false);
                        ctx.fill();
                    }
                }

                var balls = [];
                for (var i = 0; i < ctx.width * ctx.height / (65*65); i++) {
                    balls.push(new Ball(Math.random() * ctx.width, Math.random() * ctx.height));
                }

                var lastTime = Date.now();
                function update() {
                    var diff = Date.now() - lastTime;
                    for (var frame = 0; frame * 16.6667 < diff; frame++) {
                        for (var index = 0; index < balls.length; index++) {
                        balls[index].update(ctx);
                        }
                    }
                    lastTime = Date.now();
                }

                function draw() {
                    ctx.globalAlpha=1;
                    ctx.fillStyle = '#ffffff';
                    ctx.fillRect(0,0,ctx.width, ctx.height);
                    for (var index = 0; index < balls.length; index++) {
                        var ball = balls[index];
                        ball.draw(ctx);
                        ctx.beginPath();
                        for (var index2 = balls.length - 1; index2 > index; index2 += -1) {
                        var ball2 = balls[index2];
                        var dist = Math.hypot(ball.x - ball2.x, ball.y - ball2.y);
                            if (dist < 100) {
                            ctx.strokeStyle = "#bbb";
                            ctx.globalAlpha = 1 - (dist / 150);
                            ctx.lineWidth = "1px";
                            ctx.moveTo((0.5 + ball.x) | 0, (0.5 + ball.y) | 0);
                            ctx.lineTo((0.5 + ball2.x) | 0, (0.5 + ball2.y) | 0);
                            }
                        }
                        ctx.stroke();
                    }
                }

代码我看了很久感觉都是一样的。。但是在微信小程序中无法显示。

Answer 1

你得代码有2处问题

• 第一个, 下面的 clearTimeout(timer) 应该放在 loop 之前

function loop() {
      // console.log(ctx.width,ctx.height)
      //  clearRect 1
      ctx.clearRect(0, 0, ctx.width, ctx.height);
      update();
      draw();
      var timer = setTimeout(function () {
        loop();
        clearTimeout(timer);
      }, 2000)
    }

• 第二个 draw 函数的最后要执行 ctx.draw();

最后，给个可运行的版本

• wxml 代码

<view class="container">
  <canvas canvas-id="test" />
</view>

• js 代码

代码进行了适当的修改，只是语法和位置变了，原因点就是上面提到的2点。

const TAU = 2 * Math.PI;

function Ball(startX, startY, startVelX, startVelY) {
  this.x = startX || Math.random() * ctx.width;
  this.y = startY || Math.random() * ctx.height;
  this.vel = {
    x: startVelX || Math.random() * 2 - 1,
    y: startVelY || Math.random() * 2 - 1
  };
  this.update = function (ctx) {

    if (this.x > ctx.width + 50 || this.x < -50) {
      this.vel.x = -this.vel.x;
    }
    if (this.y > ctx.height + 50 || this.y < -50) {
      this.vel.y = -this.vel.y;
    }
    this.x += this.vel.x;
    this.y += this.vel.y;
  };
  // 画圆
  this.draw = function (ctx) {
    ctx.beginPath();
    //ctx.setGlobalAlpha(0.4);
    ctx.setFillStyle('#333333');
    ctx.arc((0.5 + this.x) | 0, (0.5 + this.y) | 0, 3, 0, TAU, false);
    ctx.fill();
  }
}

Page({
  data: {
    lock: false
  },
  ctx: null,
  times: [],
  balls: [],
  timer: null,
  lastTime: Date.now(),
  onLoad() {
    this.ctx = wx.createCanvasContext('test');
    this.ctx.width = 300;
    this.ctx.height = 150;
    for (let i = 0; i < this.ctx.width * this.ctx.height / (65 * 65); i++) {
      this.balls.push(new Ball(Math.random() * this.ctx.width, Math.random() * this.ctx.height));
    }
  },
  onShow() {
    this.loop();
  },
  loop() {
    this.ctx.clearRect(0, 0, this.ctx.width, this.ctx.height);
    this.update();
    this.draw();
    this.timer = setTimeout(() => {
      clearTimeout(this.timer);
      this.loop();
    }, 2000);
  },
  update() {
    const diff = Date.now() - this.lastTime;

    for (let frame = 0; frame * 16.6667 < diff; frame++) {
      for (let index = 0; index < this.balls.length; index++) {
        this.balls[index].update(this.ctx);
      }
    }

    this.lastTime = Date.now();
  },

  draw() {
    this.ctx.setGlobalAlpha(1);
    this.ctx.setFillStyle('#ffffff');
    this.ctx.fillRect(0, 0, this.ctx.width, this.ctx.height);
    for (let index = 0; index < this.balls.length; index++) {
      let ball = this.balls[index];
      ball.draw(this.ctx);
      this.ctx.beginPath();
      for (let index2 = this.balls.length - 1; index2 > index; index2 += -1) {
        var ball2 = this.balls[index2];
        var dist = Math.hypot(ball.x - ball2.x, ball.y - ball2.y);
        if (dist < 100) {
          this.ctx.setStrokeStyle("#bbbbbb");
          // ctx.setGlobalAlpha(1 - (dist > 100 ? .8 : dist / 150));
          this.ctx.setGlobalAlpha(1 - dist / 150);
          this.ctx.setLineWidth(1);
          this.ctx.moveTo((0.5 + ball.x) | 0, (0.5 + ball.y) | 0);
          this.ctx.lineTo((0.5 + ball2.x) | 0, (0.5 + ball2.y) | 0);
        }
      }
      this.ctx.stroke();
    }
    this.ctx.draw();
  }
})