<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid gray;margin: 50px auto;display: block;">
当前浏览器不支持Canvas，请更换浏览器再试
</canvas>
<script>
window.onload=function(){
var sev=[
{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:"#67beef"},
{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
{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:"#fa8ecc"},
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800},{x:600,y:200}],color:"#f6ca29"}
]
var canvas=document.getElementById("canvas");
canvas.width=1600;
canvas.height=1600;
if(canvas.getContext("2d")){
var context=canvas.getContext("2d");
for(var i=0;i<sev.length;i++){
draw(sev[i],context);
}
//MyCanvas(context);
//使用context绘制
}else{
alert("当前浏览器不支持")
}
}
function draw(sev,context){
context.beginPath();
context.moveTo(sev.p[0].x,sev.p[0].y);
for(var i=1;i<sev.p.length;i++){
context.lineTo(sev.p[i].x,sev.p[i].y);
}
context.closePath();
context.fillStyle=sev.color;
context.fill();
context.lineWidth=2;
context.strokeStyle="black";
context.stroke();
}
</script>
</body>
</html>如上代码，怎么跟正儿八经的七巧板不一样？嗯？是不是坐标错了？
另外问一下，这个坐标具体怎么搞？自己去算？
坐标错了。
坐标不一样结果也不一样
path坐标可以通过AI保存Svg得到坐标点