不知道是哪里出錯(cuò)，只有一個(gè)灰色的框
<!DOCTYPE html>
<html>
<head>
?? ?<meta charset="UTF-8">
?? ?<title>倒計(jì)時(shí)效果</title>
</head>
<body>
?? ?<canvas id="canvas" style="border:1px solid #aaa; display:block; margin:50px auto;">
?? ??? ?當(dāng)前瀏覽器不支持canvas,請(qǐng)更換瀏覽器后再試(若支持則忽略此行代碼)
?? ?</canvas>
<script type="text/javascript">
?? ?var tangram = [
?? ??? ?{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
?? ??? ?{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},
?? ??? ?{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
?? ??? ?{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},
?? ??? ?{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},
?? ??? ?{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},
?? ??? ?{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"},
?? ?]
?? ?window.onload = function(){
?? ??? ?var canvas = document.getElementById("canvas");
?? ??? ?canvas.width = 800;
?? ??? ?canvas.height = 800;
?? ??? ?var context = canvas.gtContext("2d");
?? ??? ?//使用context繪制
?? ??? ?
?? ??? ?for (var i = 0:i<tangram.length; i ++) {
?? ??? ??? ?draw( tangram[i],context)
?? ??? ?}
?? ??? ?function draw( plice , cxt){
?? ??? ??? ?cxt.beginPath();
?? ??? ??? ?cxt.moveTo( plice.p[0].x , plice.p[0].y);
?? ??? ??? ?for (var i = 1; i<plice.p.length ; i++) {
?? ??? ??? ??? ?cxt.closePath();
?? ??? ??? ??? ?cxt.fillStyle=plice.color;
?? ??? ??? ??? ?cxt.fill();
?? ??? ??? ??? ?
?? ??? ??? ??? ?context.lineWidth = 3
??? ??? ??? ??? ?context.strokeStyle = "red"
?? ??? ??? ??? ?context.stroke()//stroke筆畫(huà)的意思，用來(lái)繪制線條
?? ??? ??? ?}
</script>
</body>
</html>
<html>
<head>
?? ?<meta charset="UTF-8">
?? ?<title>倒計(jì)時(shí)效果</title>
</head>
<body>
?? ?<canvas id="canvas" style="border:1px solid #aaa; display:block; margin:50px auto;">
?? ??? ?當(dāng)前瀏覽器不支持canvas,請(qǐng)更換瀏覽器后再試(若支持則忽略此行代碼)
?? ?</canvas>
<script type="text/javascript">
?? ?var tangram = [
?? ??? ?{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
?? ??? ?{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},
?? ??? ?{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
?? ??? ?{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},
?? ??? ?{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},
?? ??? ?{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},
?? ??? ?{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"},
?? ?]
?? ?window.onload = function(){
?? ??? ?var canvas = document.getElementById("canvas");
?? ??? ?canvas.width = 800;
?? ??? ?canvas.height = 800;
?? ??? ?var context = canvas.gtContext("2d");
?? ??? ?//使用context繪制
?? ??? ?
?? ??? ?for (var i = 0:i<tangram.length; i ++) {
?? ??? ??? ?draw( tangram[i],context)
?? ??? ?}
?? ??? ?function draw( plice , cxt){
?? ??? ??? ?cxt.beginPath();
?? ??? ??? ?cxt.moveTo( plice.p[0].x , plice.p[0].y);
?? ??? ??? ?for (var i = 1; i<plice.p.length ; i++) {
?? ??? ??? ??? ?cxt.closePath();
?? ??? ??? ??? ?cxt.fillStyle=plice.color;
?? ??? ??? ??? ?cxt.fill();
?? ??? ??? ??? ?
?? ??? ??? ??? ?context.lineWidth = 3
??? ??? ??? ??? ?context.strokeStyle = "red"
?? ??? ??? ??? ?context.stroke()//stroke筆畫(huà)的意思，用來(lái)繪制線條
?? ??? ??? ?}
</script>
</body>
</html>
2016-07-14
忘記說(shuō)for循環(huán) i=1; 后面是分號(hào)不是冒號(hào)
2016-07-14
2016-07-14
就是你的for循環(huán)遍歷完得有最終的確定點(diǎn)呀，所以少了一行代碼，你把cxt.lineTo(plice.p[i].x,plice.p[i].y);這句話加上去試試，看看有沒(méi)有用
2016-07-14
? ? ? ? function draw( plice , cxt){
?? ??? ??? ?cxt.beginPath();
?? ??? ??? ?cxt.moveTo( plice.p[0].x , plice.p[0].y);
?? ??? ??? ?for (var i = 1; i<plice.p.length ; i++) {
? ? ? ? ? ? ? ?cxt.lineTo(plice.p[i].x,plice.p[i].y);
?? ??? ??? ??? ?cxt.closePath();
?? ??? ??? ??? ?cxt.fillStyle=plice.color;
?? ??? ??? ??? ?cxt.fill();