qq_无意间哼出的旋律_0
2016-05-27 11:01
<!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>
<!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里面的循环语句写错了,求最佳求最佳
错误一:调用draw()函数时第一个参数拼写错误,sev不是sec;错误二:drow函数内部的for循环中,pic.lineTo(piece[i].x,piece[i].y 应改为 pic.lineTo(piece.p[i].x,piece.p[i].y。而且没懂你为啥要用jquery
炫丽的倒计时效果Canvas绘图与动画基础
96751 学习 · 1000 问题
相似问题