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

我想把七巧板分解来画，先画出第一个板块，不知道是否语法有问题？能这样直接使用多层数组的值吗？ tangram.p.x[0]

$("#tangram").bind("click",function tangram() {
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 700;
if (canvas.getContext("2d")) {
var context = canvas.getContext("2d");
}
else {
alert("当前浏览器不支持Canvas,推荐使用Chrome浏览器")
}
var tangram=[
{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"red"},
{},
{},
{},
{},
{},
{},
]
context.beginPath();
context.moveTo(tangram.p.x[0],tangram.p.y[0]);
context.lineTo(tangram.p.x[1],tangram.p.y[1]);
context.lineTo(tangram.p.x[2],tangram.p.y[2]);
context.closePath();
context.fillStyle="tangram.p.color";
context.fill();
context.strokeStyle="red";
context.stroke();
})

白水向前冲

2015-01-23

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

关注问题我要回答

1942

操作

收起

1 回答

白水向前冲提问者
2015-01-23

自己解决了，问题出在数组的语法错误，经过几次修改，终于把第一个三角形画出来了，不过貌似比老师的例子里面大很多啊

$("#tangram").bind("click",function tangram() {
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 700;
if (canvas.getContext("2d")) {
var context = canvas.getContext("2d");
}
else {
alert("当前浏览器不支持Canvas,推荐使用Chrome浏览器")
}
var tangram=[
{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"red"},
{},
{},
{},
{},
{},
{},
]

context.beginPath();
context.moveTo(tangram[0].p[0].x,tangram[0].p[0].y);
context.lineTo(tangram[0].p[1].x,tangram[0].p[1].y);
context.lineTo(tangram[0].p[2].x,tangram[0].p[2].y);
context.closePath();
context.fillStyle=tangram[0].color;
context.fill();
})