畫布顯示不出來，對照了幾遍還是不知道錯在哪里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<canvas id="box" style="border:1px solid #aaa;display: block;margin:50px auto;" width="800" height="800"> 你的瀏覽器不支持canvas,請升級你的瀏覽器</canvas>
<script>
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>
控制臺報錯，如下：
請問要怎么改？？？
2019-04-03
var context = canvas.getContext("2d'"); 是聲明的是context，cxt.beginPath()中ctx哪來的
2018-12-05
canvas的style沒有設(shè)置display:block
2018-11-13
2018-11-13
canvas.getContext("2d'");? ?2d多了個'