问什么不能绘制七巧板?
ACCCG
2015-12-28 21:40
<!DOCTYPE html>
<html>
<head>
<title>acg</title>
</head>
<body>
<canvas id="canvas" style="border:5px #aaa solid;display:block;margin:35px auto"></canvas>
</body>
<script>
window.onload = function() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 800;
if (canvas.getContext("2d")) {
var cantext = canvas.getContext("2d"); //2d图形
} else {
alert("此浏览器不支持canvas,请更换浏览器")
};
var aa = [{
aa: [{
x: 0,
y: 0
}, {
x: 800,
y: 0
}, {
x: 400,
y: 400
}],
color: "#caff67"
}, {
aa: [{
x: 0,
y: 0
}, {
x: 400,
y: 400
}, {
x: 0,
y: 800
}],
color: "#67becf"
}, {
aa: [{
x: 800,
y: 0
}, {
x: 800,
y: 400
}, {
x: 600,
y: 600
}, {
x: 600,
y: 200
}],
color: "#ef3d61"
}, {
aa: [{
x: 600,
y: 200
}, {
x: 600,
y: 600
}, {
x: 400,
y: 400
}],
color: "f9f51a"
}, {
aa: [{
x: 400,
y: 400
}, {
x: 600,
y: 600
}, {
x: 400,
y: 800
}, {
x: 200,
y: 600
}],
color: "#a594c0"
}, {
aa: [{
x: 200,
y: 600
}, {
x: 400,
y: 800
}, {
x: 0,
y: 800
}],
color: "#fa8ecc"
}, {
aa: [{
x: 800,
y: 400
}, {
x: 800,
y: 800
}, {
x: 400,
y: 800
}],
color: "#f6ca29"
}]
for (i = 0; i < aa.length; i++) {
cc(aa[i], context);
console.log(i);
}
function cc(dd, ee) {
ee.beginPath();
ee.moveTo(dd.bb[0].x, dd.bb[0].y);
for (i = 1; i < dd.bb.length; i++)
ee.lineTo(dd.bb[i].x, dd.bb[i].x);
ee.closePath();
ee.fillStyle = dd.color;
ee.fill();
console.log(i);
}
}
</script>
</html>
1回答
-
- 李晓健
- 2015-12-28 21:57:30
function cc(dd, ee) { ee.beginPath(); // ee.moveTo(dd.bb[0].x, dd.bb[0].y); ee.moveTo(dd.aa[0].x, dd.aa[0].y); // for (i = 1; i < dd.aa.length; i++){ // ee.lineTo(dd.aa[i].x, dd.aa[i].x); // } for (y = 1; y < dd.aa.length; y++){ ee.lineTo(dd.aa[y].x, dd.aa[y].y); } ee.closePath(); ee.fillStyle = dd.color; ee.fill(); }看注释
炫丽的倒计时效果Canvas绘图与动画基础
96877 学习 · 1029 问题
相似问题