為什么在瀏覽器上顯示不出來圖形
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
</canvas>
<script>
? var tangram = [
? {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"blue"},
??
? {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"black"},
??
? {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"red"},
??
? {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"yellow"},
??
? {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"orange"},
??
? {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"pink"},
??
? {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#purple"},
]
??
??
??
? window.onload = function(){
?var canvas = document.getElementById("canvas");
? ?
?canvas.width = 800;
?canvas.height = 800;
?
?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;
?ext.fill();
?
?cxt.strockStyle = "black"
?cxt.lineWidth = 3;
?cxt.strock();
? }
? </script>
</body>
</html>
顯示不出來圖案
2015-12-01
cxt.strock();改成 cxt.stroke();
2015-10-16
代碼報錯了，知道怎么修改了吧。。。
其實呢，你可以使用chrome瀏覽器進行查找錯誤，很簡單的，下圖是報錯的內(nèi)容，然后你就知道哪里出錯了