                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /炫丽的倒计时效果Canvas绘图与动画基础

请问为什么显示不出来

<!DOCTYPE html>

<html>

<head>

#cvs{

/*border: solid 1px red;*/

display: block;

margin: 0 auto;

}

</style>

</head>

<body>

var tang =[

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

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

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

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

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

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

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

]

window.onload = function(){

console.log(tang);

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

canvas.width = 800;

canvas.height =800;

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

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

draw(tang[i],context)

}

function draw(nums,ctx){

ctx.beginPath();

ctx.moveTo(nums.p[0].x,nums.p[0].y);

for(var i=1;i<nums.p.legth;i++){

ctx.lineTo(nums.p[i].x,nums.p[i].y);

}

ctx.closePath();

ctx.fillStyle=nums.color;

ctx.fill();

}

</script>

</body>

</html>

慕设计521806

2018-10-21

源自：炫丽的倒计时效果Canvas绘图与动画基础 2-2

关注问题我要回答

1035

操作

收起

1 回答

Frewen清澄
2018-10-21

function draw(nums,ctx){
        ctx.beginPath();
        ctx.moveTo(nums.p[0].x,nums.p[0].y);
        for(var i=1;i<nums.p.legth;i++){//  for(var i=1;i<nums.p.length;i++){
            ctx.lineTo(nums.p[i].x,nums.p[i].y);
        }
        ctx.closePath();
        ctx.fillStyle=nums.color;
        ctx.fill();
}