我想把七巧板分解来画，先画出第一个板块，不知道是否语法有问题？能这样直接使用多层数组的值吗？ tangram.p.x[0]
白水向前冲
2015-01-23 11:11
$("#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();
})
1回答
-
- 白水向前冲
- 2015-01-23 11:24:52
自己解决了，问题出在数组的语法错误，经过几次修改，终于把第一个三角形画出来了，不过貌似比老师的例子里面大很多啊
$("#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();
})
炫丽的倒计时效果Canvas绘图与动画基础
96931 学习 · 1029 问题
相似问题