<!DOCTYPE?html><html?lang='zh-cn'>????<head>????????<title>tangram</title>????????<meta?charset="utf-8">????????<style?type="text/css">????????</style>????</head>????<body>????????<canvas?id="canvas"?style="border:?1px?solid?#aaa;display:?block;margin:?30px?auto;"></canvas>????????<script?type="text/javascript">????????????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:'ef3d6q'},????????????????{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:"#fa83cc"},????????????????{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"},????????????];????????????window.onload=function(){????????????????var?canvas=document.getElementById('canvas');????????????????canvas.width=800;????????????????canvas.height=800;????????????????var?context=canvas.getContext('2d');????????????????for(var?i=0;i<tangram.length;i++){????????????????????draw(tangram[i],context);????????????????}????????????????function?draw(place,cxt){????????????????????cxt.beginPath();????????????????????cxt.moveTo(place.p[0].x,place.p[0].y);????????????????????for(var?i=1;i<place.p.length;i++){????????????????????????cxt.lineTo(place.p[i].x,place.p[i].y);????????????????????cxt.closePath();????????????????????cxt.fillStyle=place.color;????????????????????cxt.fill();????????????????????cxt.strokeStyle='#000';????????????????????cxt.lineWidth=3;????????????????????cxt.stroke();????????????????????}????????????????}????????????}???????????</script>????</body></html>
2021-02-25
哦哦,我試試,謝謝啦
2021-02-23
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:'ef3d6q'},
????????{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:"#fa83cc"},
????????{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"},
????];
????window.onload=function(){
????????var?canvas=document.getElementById('canvas');
????????canvas.width=800;
????????canvas.height=800;
????????var?context=canvas.getContext('2d');
????????for(var?i=0;i<tangram.length;i++){
????????????draw(tangram[i],context);
????????}
????}
????function?draw(place,cxt){
????????cxt.beginPath();
????????cxt.moveTo(place.p[0].x,place.p[0].y);
????????for(var?i=1;i<place.p.length;i++){
????????????cxt.lineTo(place.p[i].x,place.p[i].y);
????????}
????????cxt.fillStyle=place.color;
????????cxt.closePath();
????????cxt.fill();
????????cxt.strokeStyle='#000';
????????cxt.lineWidth=3;
????????cxt.stroke();
????}
2021-01-27
可以了,一般for循環(huán)有{}呀,為啥這里加上{}就不行了,也沒多寫啊
2021-01-25
還是不行哎
2021-01-23
把你函數(shù)draw()里面的for下面的{}刪了,不帶{}只執(zhí)行cxt.lineTo(place.p[i].x,place.p[i].y);