问答详情
源自：2-2 绘制直线、多边形和七巧板

只显示了四个板块

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 11:55

个回答

  • zen2015
    2019-07-20 16:01:18

    canvas 宽高 只有 600 ，绘制的数据坐标里  x,y 有800， 显示区域不够 ，所以看不到。

    1
  • 猿小天
    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>


    0
  • 慕无忌0402515
    2019-06-21 16:39:10

    green pink red改成#颜色试试

    0