2016-11-10 2 views
1

Wie kann ich dies mit Javascript oder jquery machen? ExampleWie kann ich dies mit Javascript oder JQuery machen

Die Sache, die ich tun möchte, ist eine Figur (Dreieck) erstellen und eine Kachel mit dieser Figur, wie die in dem Bild machen mit gelegentlichen Farben

ich diese

<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>
versucht haben,

+0

Was haben Sie versucht? SO kann deinen Code nicht für dich schreiben, aber wir können dir helfen, wenn du nicht weiterkommst. –

+3

Es sieht so aus, als ob Sie möchten, dass wir einen Code für Sie schreiben. Während viele Benutzer bereit sind, Code für einen in Not geratenen Coder zu produzieren, helfen sie normalerweise nur, wenn das Poster bereits versucht hat, das Problem selbst zu lösen. Eine gute Möglichkeit, diesen Aufwand zu demonstrieren, besteht darin, den Code, den Sie bisher geschrieben haben, die Beispieleingabe (falls vorhanden), die erwartete Ausgabe und die Ausgabe, die Sie tatsächlich erhalten (Konsolenausgabe, Trace-Backs usw.), einzubeziehen. Je mehr Details Sie angeben, desto mehr Antworten erhalten Sie wahrscheinlich. – secelite

+0

Ich aktualisierte die Frage, es gibt einen Code, aber ich mache nur Fliesen mit Würfeln, ich bin fest, wie man das gleiche Ding aber mit Dreiecken ... – Calicol

Antwort

0

Sie können es einfach mit html/css nur tun, hängt davon ab, wie viel Browserunterstützung Sie benötigen.

HTML

<div class="square"> <div class="triangle-left"></div> <div class="triangle-right"></div> </div>

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; }

+0

Wow, danke! Genau das brauche ich ... – Calicol

Verwandte Themen