var?trm=new?Array([
{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#CCFF33"},
{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#33CCFF"},
{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600}],color:"#FF0000"},
{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#FFFF00"},
{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#9900FF"},
{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#FF77FF"},
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#FFBB66"}
]);
//標準的畫布定義兼容性初始化
window.onload=function(){
var?canvas=document.getElementById("canvas");
canvas.width=800;
canvas.height=800;
if?(canvas.getContext)?{
var?ctx=canvas.getContext("2d")
}?else{
alert('該瀏覽器不支持canvas，請您更換瀏覽器后重試')
}
for?(var?i=0;i<trm.length;i++)?{
draw(trm[i],ctx);
}
function?draw(demo,ctx){
ctx.beginPath();
ctx.moveTo(demo.p[0].x,demo.p[0].y);
for?(var?j=1;j<demo.p.length;j++)?{
ctx.lineTo(demo.p[j].x,demo.p[j].y);
}
ctx.fillStyle="demo.color";
ctx.fill();
}
2016-11-10
// 七巧板的各個顏色色塊
var trm=[
{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#CCFF33"},
{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#33CCFF"},
{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#FF0000"},
{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#FFFF00"},
{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#9900FF"},
{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#FF77FF"},
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#FFBB66"}
];
window.onload = function(){
var canvas = document.getElementById('canvas');
canvas.height = 900;
canvas.width = 1024;
var context = canvas.getContext("2d");
for(var i=0;i<trm.length;i++){
draw(trm[i],context);
}
}
function draw(demo,ctx){
ctx.beginPath();
ctx.moveTo(demo.p[0].x,demo.p[0].y);
for(var j=1;j<demo.p.length;j++){
ctx.lineTo(demo.p[j].x,demo.p[j].y);
}
ctx.fillStyle = demo.color;
ctx.fill();
}
2016-10-28
你少了一個分號；
trm = [] 和 new Array()定義不一樣。new Array()是創建一個array 的object。
ctx.fillStyle="demo.color";不要加引號
同學你這個基礎有點差，要多注意些細節問題。