只显示了四个板块
慕桂英850551
2019-06-05 11:55
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();
}
}
3回答
-
- zen2015
- 2019-07-20 16:01:18
canvas 宽高 只有 600 ，绘制的数据坐标里 x,y 有800， 显示区域不够 ，所以看不到。
-
- 猿小天
- 2019-07-01 15:08:10
<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> -
- 慕无忌0402515
- 2019-06-21 16:39:10
green pink red改成#颜色试试
炫丽的倒计时效果Canvas绘图与动画基础
96746 学习 · 1000 问题
相似问题