我寫的咋執(zhí)行不了呢？請(qǐng)大神幫看看！~
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:0},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f5la"},
{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.getContext("2d");
for(var i=0;i<tangram.length;i++){
draw(tangram[i],context);
//alert('aaaa')
}
}
function draw(piece,cxt){
cxt.beginPath();
cxt.moveTo(piece.p[0].x,piece.p[0].y);
for(var i=1 ; i<piece.p.lenght ; i++ ){
cxt.lineTo( piece.p[i].x , piece.p[i].y );
cxt.closePath();
cxt.fillStyle=piece.color;
cxt.fill();//填充色
}
}
2015-03-26
for(var i=1 ; i<piece.p.lenght ; i++ ){
cxt.lineTo( piece.p[i].x , piece.p[i].y );
cxt.closePath();
cxt.fillStyle=piece.color;
cxt.fill();//填充色
}
}
這里有問題
??? for(var i=1;i<piece.p.length;i++)
?? ??? ??? ?cxt.lineTo(piece.p[i].x,piece.p[i].y);//應(yīng)該只有這一條語句包含在for循環(huán)中
完整代碼如下:
<!DOCTYPE html>
<html>
? <head>
??? <title>index.html</title>
?? ?
??? <meta name="keywords" content="keyword1,keyword2,keyword3">
??? <meta name="description" content="this is my page">
??? <meta name="content-type" content="text/html; charset=UTF-8">
?? ?
??? <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
? </head>
?
? <body>
??? <canvas id="canvas"? style="border:1px solid #aaa;
?? ?display:block;margin:50px auto;">當(dāng)前瀏覽器不支持canvas
?? ?</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:0},{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.getContext('2d');
?? ?
?? ?for(var i=0;i<tangram.length;i++)
?? ??? ?draw(tangram[i],context)
?? ?
?? ?}
?? ?
?? ?function draw(piece,cxt){
?? ??? ?cxt.beginPath();
?? ??? ?cxt.moveTo(piece.p[0].x,piece.p[0].y);
?? ??? ?for(var i=1;i<piece.p.length;i++)
?? ??? ??? ?cxt.lineTo(piece.p[i].x,piece.p[i].y);
?? ??? ?cxt.closePath();
?? ??? ?
?? ??? ?cxt.fillStyle=piece.color;
?? ??? ?cxt.fill();
?? ??? ?
?? ??? ?
?? ??? ?cxt.strokeStyle="black";
?? ??? ?cxt.lineWidth=3;
?? ??? ?cxt.stroke();
?? ?}
? </script>
?
? </body>
</html>
2015-02-05
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:0},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f5la"},
{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.getContext('2d');
for ( var i=0 ; i<tangram.length; i++)
draw(tangram[i], context )
?}
? ?function draw(pice , cxt ){
? cxt.beginPath()
cxt.moveTo(pice.p[0].x , pice.p[0].y);
for (var i=1; i<pice.p.length ; i++)?
? cxt.lineTo(pice.p[i].x,pice.p[i].y);
? cxt.closePath();?
? cxt.fillStyle=pice.color;
? cxt.fill();
? }
2015-02-02
function draw(piece,cxt){
????cxt.beginPath();
????cxt.moveTo(piece.p[0].x,piece.p[0].y);
????for(var i= 1; i<piece.p.length; i++){
????????cxt.lineTo(piece.p[i].x,piece.p[i].y);
????????}
???? cxt.closePath();
????
???? cxt.fillStyle=piece.color;
???? cxt.fill();
????
???? cxt.strokeStyle="black";
???? cxt.lineWidth=3;
???? cxt.stroke();
}
2015-02-02
<canvas id="convas" style="border:#000 solid 1px; display:block; margin:50px auto">該瀏覽器不支持canvas</canvas>?
不知道你前面有沒有寫上這個(gè)