原创内容，转载请注明原文网址：http://homeqin.cn/a/wenzhangboke/jishutiandi/weixinkaifa/2019/0107/317.html
常州微信小程序开发-canvas不显示问题
根据一个实例改造成微信小程序里的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();
}
}
代码我看了很久感觉都是一样的。。但是在微信小程序中无法显示。
代码我看了很久感觉都是一样的。。但是在微信小程序中无法显示。
答：代码有2处问题
-
第一个, 下面常州手游开发的 clearTimeout(timer) 应该放在 loop 之前
-
第二个 draw 函数的最后要执行 ctx.draw();
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)<view class="container"> <canvas canvas-id="test" /></view>代码进行了适当的修改，只是语法和位置变了，原因点就是常州游戏开发培训上面提到的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();上篇：上一篇：常州微信小程序开发-微信小程序一般问题解答
下篇：下一篇：常州微信小程序-canvas绘图问题总结
