                        課程
                    
                        /前端開發
                        
                            /Html5
                        
                        /炫麗的倒計時效果Canvas繪圖與動畫基礎

為什么無法出現七巧板？

<!doctype html>
<html>
<head>
?? ?<meta charset="utf-8">
?? ?<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
?? ?<title>tes6--H5關于七巧板</title>
?? ?<style type="text/css">
?? ?#myCanvas{display:block;border:1px solid #f00; margin:50px auto;}
?? ?</style>
</head>
<body>
?? ?<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
<script type="text/javascript">
$(document).ready(function(){
?? ?var sev=[
?? ??? ?{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:"#67beef"},
?? ??? ?{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},{x:600,y:200}],color:"#f6ca29"}
?? ?]

?? ?window.onload=function(){
?? ??? ?var box=document.getElementById('myCanvas');
?? ??? ?var picture=box.getContext('2d');
?? ??? ?for(i=0;i<sev.length;i++){
?? ??? ??? ?draw(sec[i],picture);
?? ??? ?}
?? ?}
?? ?function draw(piece,pic){
?? ??? ?pic.beginPath();
?? ??? ?pic.moveTo(piece.p[0].x,piece.p[0].y);
?? ??? ?for(i=0;i<piece.p.length;i++){
?? ??? ??? ?pic.lineTo(piece[i].x,piece[i].y)
?? ??? ?}
?? ??? ?pic.closePath();
?? ??? ?pic.fillStyle=piece.color;
?? ??? ?pic.fill();
?? ?}
})
</script>
</html>

qq_無意間哼出的旋律_0

2016-05-27

源自：炫麗的倒計時效果Canvas繪圖與動畫基礎 2-2

關注問題我要回答

1183

操作

收起

3 回答

醬爆1992 回答被采納 +3 積分
2016-05-27

<!doctype?html>
<html>
<head>
????<meta?charset="utf-8">
????<!--?<script?type="text/javascript"?src="jquery-1.8.2.min.js"></script>?-->
????<title>tes6--H5關于七巧板</title>
????<style?type="text/css">
????#myCanvas{display:block;border:1px?solid?#f00;?margin:50px?auto;}
????</style>
</head>
<body>
????<canvas?id="myCanvas"?width="800"?height="800"></canvas>
</body>
<script?type="text/javascript">
window.onload=function(){


????var?sev=[
????????{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:"#67beef"},
????????{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},{x:600,y:200}],color:"#f6ca29"}
????]


????????var?box=document.getElementById('myCanvas');
????????var?picture=box.getContext('2d');
????????for(j=0;j<sev.length;j++){
????????????draw(sev[j],picture);
????????}
????
????function?draw(piece,pic){
????????pic.beginPath();
????????pic.moveTo(piece.p[0].x,piece.p[0].y);
????????for(i=1;i<piece.p.length;i++){
????????????pic.lineTo(piece.p[i].x,piece.p[i].y)
????????}?
????????pic.closePath();
????????pic.fillStyle=piece.color;
????????pic.fill();
????}
}
</script>
</html>

這是根據你的代碼稍作了點修改，你的錯誤在于function draw里面的循環語句寫錯了，求最佳求最佳