<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <canvas id="canvas" style="border: 1px #ddd solid;display: block;margin:0 auto"></canvas> <script> var tangram = [ {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"red"}, {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"blue"}, {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"yellow"}, {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"green"}, {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"pink"}, {p:[{x:200,y:600},{x:0,y:800},{x:400,y:800}],color:"orange"}, {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"purple"} ]; function draw(piece,cxt){ cxt.beginPath(); cxt.moveTo(piece.p[0].x , piece.p[0].y); for(var i=1;i<piece.p.length;i++){ cxt.lineTo(piece.p[i].x , piece.p[i].y); } cxt.closePath(); cxt.fillStyle = piece.color; cxt.fill(); } window.onload = function(){ var canvas = document.getElementById('canvas'); canvas.width = 800; canvas.height = 800; if(canvas.getContext('2d')){ var context = canvas.getContext('2d'); for(var i=0;i<tangram.length;i++){ draw(tangram[i],context) } }else{ alert('当前游览器不支持Canvas，请更换游览器后再试！'); } } </script></body><script>/* 总结 绘制七巧板 主要运用的js的for循环的巧妙 1.定义路径 trangram 2.第一层for，循环trangram[i] 3.函数draw,第二层for，循环取出绘制路径 trangram.p[i].x */</script></html>Salin selepas log masuk
Apa itu j2ee
Apakah kaedah untuk menyambung ke pelayan vps
Bagaimana untuk mengubah dua halaman menjadi satu dokumen perkataan
Cara membuat klon WeChat pada telefon bimbit Huawei
Apakah cara untuk membersihkan terapung?
lebar mengimbangi
Apakah yang perlu saya lakukan jika cakera sementara ps penuh?
Jadual perkataan tersebar di seluruh halaman
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
