Heim >Web-Frontend >HTML-Tutorial >canvas-tangram.html_html/css_WEB-ITnose
canvas-tangram.html_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:33:201098Durchsuche
<!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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：input输入框中光标高度的变化问题_html/css_WEB-ITnoseNächster Artikel：CSS模拟实现alert和confirm实现_html/css_WEB-ITnose