<!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>Copier après la connexion
La différence et la connexion entre Java et Javascript
Type d'utilisation en JavaScript
Comment désactiver le téléchargement automatique de WeChat
Comment accélérer les pages Web
Comment résoudre les caractères tronqués en PHP
Que signifient pleine largeur et demi-largeur ?
Pièces sous-évaluées à thésauriser en 2024
Quelles sont les méthodes pour changer instantanément l'IP dans les vps dynamiques ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
