如何使用Javascript或JQuery实现此目的
[英]How can I make this with Javascript or JQuery
问题描述
How can I make this using javascript or jquery? 
我怎样才能使用javascript或jquery？ Example 例
The thing i want to do is create a figure (triangle) and make a tile with this figure like the one in the image with random colors 我想要做的是创建一个图形（三角形）并用这个图形制作一个瓷砖，就像图像中的颜色一样
I have tried this 我试过这个
<html><head> <style> body{ background-color: ivory; padding:10px; } #canvas{border:1px solid red;} </style> </head> <body> <canvas id="canvas" width="1000" height="1000"></canvas> <script type="text/javascript"> var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; var colwidth=cw/20; var rowheight=ch/20; for(var y=0;y<20;y++){ for(var x=0;x<20;x++){ ctx.fillStyle=randomColor(); ctx.fillRect(x*colwidth,y*rowheight,colwidth,rowheight); ctx.strokeRect(x*colwidth,y*rowheight,colwidth,rowheight); }} function randomColor(){ return('#'+Math.floor(Math.random()*12345678).toString(16)); } </script> </body></html>
1 个解决方案
解决方案1
0 已采纳 2016-11-10 16:42:11
You can easily do it with html/css only, depends how much browser support you need. 您可以使用html / css轻松完成，具体取决于您需要多少浏览器支持。
HTML HTML
<div class="square"> <div class="triangle-left"></div> <div class="triangle-right"></div> </div>
CSS CSS
.triangle-right{ position:absolute; bottom: 0; right: 0; width: 0; height: 0; border-left: 100px solid transparent; border-right: 0 solid transparent; border-bottom: 100px solid red; } .triangle-left{ position:absolute; top: 0; left: 0; width: 0; height: 0; border-right: 100px solid transparent; border-left: 0 solid transparent; border-top: 100px solid green; } .square{ position:relative; float: left; width: 100px; height: 100px; }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.