為什么無法出現(xiàn)七巧板？
<!doctype html>
<html>
<head>
?? ?<meta charset="utf-8">
?? ?<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
?? ?<title>tes6--H5關(guān)于七巧板</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>
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關(guān)于七巧板</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>這是根據(jù)你的代碼稍作了點(diǎn)修改，你的錯(cuò)誤在于function draw里面的循環(huán)語(yǔ)句寫錯(cuò)了，求最佳求最佳
2022-03-26
用left也是可以的，老師只是教了使用絕對(duì)定位布局的一種方法，畢竟不是很常用，所以沒有面面俱到而已為什么我的代碼和你們的不一樣???
2016-05-27
錯(cuò)誤一：調(diào)用draw()函數(shù)時(shí)第一個(gè)參數(shù)拼寫錯(cuò)誤，sev不是sec;錯(cuò)誤二：drow函數(shù)內(nèi)部的for循環(huán)中，pic.lineTo(piece[i].x,piece[i].y ?應(yīng)改為 ?pic.lineTo(piece.p[i].x,piece.p[i].y。而且沒懂你為啥要用jquery