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

只顯示了四個板塊

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: 400 }, { x: 600, y: 600 }, { x: 600, y: 200 }], color: "green" },

{ 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: "pink" },

{ p: [{ x: 800, y: 400 }, { x: 800, y: 800 }, { x: 400, y: 800 }], color: "red" },

];

window.onload = function () {

var canvas = document.getElementById("test");

canvas.width = 600;

canvas.height = 600;

var context = canvas.getContext("2d");

context.lineWidth = 2;

for(var i = 0;i < tangram.length;i++){

draw(tangram[i],context);

}

function draw(data1,data2){

data2.beginPath();

data2.moveTo(data1.p[0].x,data1.p[0].y);

for(var i = 1;i<data1.p.length;i++){

data2.lineTo(data1.p[i].x,data1.p[i].y);

}

data2.closePath();

data2.fillStyle = data1.color;

data2.fill();

}

慕桂英850551

2019-06-05

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

關注問題我要回答

1139

操作

收起

3 回答

zen2015
2019-07-20

canvas 寬高只有 600 ，繪制的數據坐標里? x,y 有800，顯示區域不夠，所以看不到。

1 回復有任何疑惑可以回復我~

收起回答

猿小天
2019-07-01

<script>var?data?=?[{p:[{x:0,y:0},{x:200,y:200},{x:0,y:400}],color:"#60B7CE"},?{p:[{x:0,y:0},{x:200,y:200},{x:400,y:0}],color:"#C7F268"},?{p:[{x:200,y:200},{x:300,y:300},{x:300,y:100}],color:"#FDEB1C"},?{p:[{x:300,y:100},{x:400,y:0},{x:400,y:200},{x:300,y:300}],color:"#FF5163"},?{p:[{x:0,y:400},{x:100,y:300},{x:200,y:400}],color:"#FE9CCC"},?{p:[{x:200,y:200},{x:300,y:300},{x:200,y:400},{x:100,y:300}],color:"#A498BD"},?{p:[{x:400,y:200},{x:400,y:400},{x:200,y:400}],color:"#FCC529"}?]?$(function(){?var?c?=?document.getElementById("myCanvas");?var?content?=?c.getContext("2d");?//canvas繪圖?//?ctx.beginPath();?//?ctx.moveTo(0,0);?//?ctx.lineTo(200,200);?//?//ctx.lineTo(100,400);?//?ctx.lineTo(0,400);?//?ctx.closePath()?//?ctx.fillStyle="rgb(2,100,30)"?//?ctx.fill()?for(let?i=0;i<data.length;i++){?draw(data[i].p,data[i].color,content);?}?});?function?draw(p,c,ctx){?ctx.beginPath();?ctx.moveTo(p[0].x,p[0].y);?for(let?i=1;i<p.length;i++){?ctx.lineTo(p[i].x,p[i].y);?}?ctx.fillStyle=?c;?ctx.fill()?ctx.closePath()?ctx.lineWidth?=?2;?//線寬?ctx.strokeStyle?=?"#000"?ctx.stroke();?}</script>