2016-11-10 4 views
1

どうすればjavascriptまたはjqueryを使用して作成できますか? ExampleJavascriptまたはJQueryでこれを行うにはどうすればいいですか

私がやりたい事は、私がこの

<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つのようなこの図でタイルを図形(三角形)を作成し、作成され

+0

あなたは何を試してみましたか?あなたのためにあなたのコードを書くことはできませんが、あなたが立ち往生したときにお手伝いすることができます。 –

+3

あなたのためにコードを書くことが望ましいようです。多くのユーザーは、苦労しているコーダーのコードを作成したいと考えていますが、通常、ポスターが既に問題を解決しようとしているときにのみ役立ちます。この努力を実証する良い方法は、これまでに書いたコード、サンプル入力(もしあれば)、予想される出力、実際に得られる出力(コンソール出力、トレースバックなど)を含めることです。あなたが提供する詳細があれば、受け取る可能性のある回答が増えます。 – secelite

+0

私は質問を更新しましたが、コードはありますが、キューブを使ってタイルを作成するだけです。同じことを三角で行う方法にはまっています... – Calicol

答えて

0

あなたはhtml/cssのみで簡単に行うことができますが、必要なブラウザサポートの量によって異なります。

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

うわー、ありがとう!それはまさに私が必要とするものです... – Calicol

関連する問題