画布显示不出来，对照了几遍还是不知道错在哪里-慕课网

首页课程实战体系课手记专栏慕课教程

画布显示不出来，对照了几遍还是不知道错在哪里

来源：2-2 绘制直线、多边形和七巧板

只要干不死就往死里干

2018-11-13 14:38

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<canvas id="box" style="border:1px solid #aaa;display: block;margin:50px auto;" width="800" height="800"> 你的浏览器不支持canvas,请升级你的浏览器</canvas>

var tangram = [

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

{ p: [{ x: 0, y: 0 }, { x: 400, y: 400 }, { x: 0, y: 800 }], color: "#61b7d2" },

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

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

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

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

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

];

window.onload = function () {

console.log(tangram);

var canvas = document.getElementById("box");

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();

}

</script>

</body>

</html>

控制台报错，如下：

请问要怎么改？？？

写回答关注