                        课程
                    
                        /前端开发
                        
                            /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

关注问题我要回答

995

操作

收起

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>