代碼如下，問題是為什么第一次打開的時(shí)候一切正常，但是當(dāng)瀏覽器窗口大小變化的時(shí)候canvas里面的內(nèi)容就沒了呢。

var tangram = [

? ? ? { p: [{ x: 0, y: 0 }, { x: 800, y: 0 }, { x: 400, y: 400 }], color: "#cff67" },

? ? ? { p: [{ x: 0, y: 0 }, { x: 400, y: 400 }, { x: 0, y: 800 }], color: "#67becf" },

? ? ? { p: [{ x: 800, y: 0 }, { x: 800, y: 400 }, { x: 600, y: 600 }, { x: 600, y: 200 }], color: "#ef3d61" },

? ? ? { p: [{ x: 600, y: 200 }, { x: 600, y: 600 }, { x: 400, y: 400 }], color: "#f9f5la" },

? ? ? { p: [{ x: 400, y: 400 }, { x: 600, y: 600 }, { x: 400, y: 800 }, { x: 200, y: 600 }], color: "#a594c0" },

? ? ? { p: [{ x: 200, y: 600 }, { x: 400, y: 800 }, { x: 0, y: 800 }], color: "#fa8ecc" },

? ? ? { p: [{ x: 800, y: 400 }, { x: 800, y: 800 }, { x: 400, y: 800 }], color: "#f6ca69" }?

? ? ];

(function() {

? ? initHeader();

? ? addListeners();

? ? function initHeader() {

? ? ? ? width = window.innerWidth;

? ? ? ? height = window.innerHeight;

? ? ? ? canvas = document.getElementById('canvas');

? ? ? ? canvas.width = width;

? ? ? ? canvas.height = height;

? ? ? ? var context = canvas.getContext("2d");

? ? ? ? for (var i = 0; i < tangram.length; i++) {

? ? ? ? ? ? draw(tangram[i],context);

? ? ? ? }

? ? ? ??

? ? }

?

? ? function draw(piece,cxt) {

? ? ? cxt.beginPath();

? ? ? cxt.moveTo(piece.p[0].x, piece.p[0].y);

?

? ? ? for (var i = 1 ; i < piece.p.length; i++) {

? ? ? ? cxt.lineTo(piece.p[i].x, piece.p[i].y);

? ? ? }

?

? ? ? ? cxt.closePath(); ? ?

? ? ? ? cxt.fillStyle = piece.color;

? ? ? ? cxt.fill();

? ? ? ?

? ? ? ?

? ? ? ?

? ? }

? ??

? ? // Event handling

? ? function addListeners() {

? ? ? ? window.addEventListener('resize', resize);

? ? }

? ? function resize() {

? ? ? ? width = window.innerWidth;

? ? ? ? height = window.innerHeight;

? ? ? ? canvas.width = width;

? ? ? ? canvas.height = height;

? ? }

})();