为什么在浏览器上显示不出来图形-慕课网

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

为什么在浏览器上显示不出来图形

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

以我之眼

2015-10-15 20:20

<!doctype html>

<html>

<head>

</head>

<body>

</canvas>

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>

显示不出来图案

写回答关注