各ビットの長方形を描画します。

最大16個の四角形が描画されたキャンバスがあります。各ビットの長方形を描画します。

サーバーからこのバイナリ番号を受け取りました：100101101（または301、10進数）。

私はこのバイナリ（ビットごとに1つの矩形）に私の四角形を関連づけたいと思っています。0である各ビットの各矩形を隠す必要があります（または、好きなように各ビットの矩形を描きます）。

だから私のキャンバスに（私たちは100101101を見れば）私が描かれた最初の矩形を持つことになり、その後、スペース、2つの以上の長方形、その後、別のスペースなど

私は私の頭をたくさん傷よ私はビット単位の操作とビットマスクにはまったく新しいものです。私はここに（まだ私のビットを操作するための機能なしで）私の基本コードはだ、私はこれをビット単位の演算とビットマスクを使用する必要があると思いますが、そうでないかもしれない...

：

\t \t //Referencing canvas 
 
    \t \t var canvas = document.getElementById("my-canvas"); 
 
\t \t var ctx = canvas.getContext("2d"); 
 

 

 
    \t \t //Make Canvas fullscreen and responsive 
 
\t  function resize() { 
 
\t \t \t canvas.width = window.innerWidth; 
 
\t \t \t canvas.height = window.innerHeight; 
 
\t \t } 
 
\t \t window.addEventListener('resize', resize, false); resize(); 
 
\t \t 
 
\t \t 
 

 
\t \t //Default Y pos to center; 
 
\t \t var yPos = canvas.height - 70; 
 
\t \t //Default X position 
 
\t \t var xPos = canvas.width/2.2; 
 

 
\t \t var maxRectangles = 16; 
 

 
\t function drawAllRectangles() { 
 

 
\t \t \t //Position, size. 
 
\t \t \t var rectWidth = 70; 
 
\t \t \t var rectHeigth = 25; 
 
\t \t \t var dy = rectHeigth + 15; 
 
\t \t \t ctx.fillStyle = "yellow"; 
 

 
\t \t \t 
 
\t \t \t var newPos = yPos; 
 
\t   var i; 
 
\t   for (i = 0; i < maxRectangles; i++) { 
 
\t    ctx.fillRect(xPos,newPos,rectWidth,rectHeigth); 
 
\t    newPos -= dy; 
 
\t   } 
 
    } 
 

 
\t \t drawAllRectangles();

canvas {background-color: #131217} 
 

 
body { margin: 0; overflow: hidden; }

<!DOCTYPE html> 
 
<html lang="en"> 
 
    
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>Draw Rect from bit</title> 
 
    
 
    </head> 
 

 

 
    <body> 
 
    
 
    <canvas id="my-canvas"></canvas> 
 
    
 
    </body> 
 

 

 
</html>

出典

2017-10-09 Simon Duchaine

あなたはその2ビット演算子を使用する必要があります「< <」 - 「左シフト」、「& 『 - 』 AND」、あなたは何をすべきかを説明見ることができ、それ

var binaryVal; 
var shiftVal; 

var calculatedShiftVal =0; 

binaryVal = 4; // 0000 0100 
//I will try to explain that shiftVal it is basicall is 1(one) when you use "<<" operator with number that means it shifted from right to left 
//Below code what happened after shift operator 
shiftVal = 1;//0000 0001 
calculatedShiftVal = shiftVal<<0;//0000 0000 0000 0001 
console.log(calculatedShiftVal); 
calculatedShiftVal = shiftVal<<1;//0000 0000 0000 0010 
console.log(calculatedShiftVal); 
calculatedShiftVal = shiftVal<<2;//0000 0000 0000 0100 
console.log(calculatedShiftVal); 
calculatedShiftVal = shiftVal<<3;//0000 0000 0000 1000 
console.log(calculatedShiftVal); 
calculatedShiftVal = shiftVal<<4;//0000 0000 0001 0000 
console.log(calculatedShiftVal); 
calculatedShiftVal = shiftVal<<5;//0000 0000 0010 0000 
console.log(calculatedShiftVal); 
calculatedShiftVal = shiftVal<<6;//0000 0000 0100 0000 
console.log(calculatedShiftVal); 
calculatedShiftVal = shiftVal<<7;//0000 0000 1000 0000 
console.log(calculatedShiftVal); 
calculatedShiftVal = shiftVal<<8;//0000 0001 0000 0000 
console.log(calculatedShiftVal); 
calculatedShiftVal = shiftVal<<9;//0000 0010 0000 0000 
console.log(calculatedShiftVal); 
calculatedShiftVal = shiftVal<<10;//0000 0100 0000 0000 
console.log(calculatedShiftVal); 
calculatedShiftVal = shiftVal<<11;//0000 1000 0000 0000 
console.log(calculatedShiftVal); 
calculatedShiftVal = shiftVal<<12;//0001 0000 0000 0000 
console.log(calculatedShiftVal); 
calculatedShiftVal = shiftVal<<13;//0010 0000 0000 0000 
console.log(calculatedShiftVal); 
calculatedShiftVal = shiftVal<<14;//0100 0000 0000 0000 
console.log(calculatedShiftVal); 
calculatedShiftVal = shiftVal<<15;//1000 0000 0000 0000 
console.log(calculatedShiftVal); 

//Then we use "&" "AND" operator with shiftVal and your number from server it is basically if your number and shiftVal gives to us "0" then you wont be draw your rectangle if it is grater than 0 then you can draw rectangle 
//for example you want to check 4th rectangle value and your number is 17 
//0000 0000 0001 0000 --> shiftVal<<4 
//0000 0000 0001 0001 --> represent 17 
//0000 0000 0001 0000 -->represent after & 
var yourVal = 17; 
console.log((shiftVal<<4)&yourVal); // result is 16 then you can draw it 
//other example you want to check 3th rectangle value and your number is 17 
//0000 0000 0000 1000 --> shiftVal<<3 
//0000 0000 0001 0001 --> represent 17 
//0000 0000 0000 0000 -->represent after & everthing is 0 now and your value is 0 
console.log((shiftVal<<3)&yourVal); // result is 0 then you shouldn't draw it

はフェルハトBASが指摘したように、&ビット単位のAND演算子、および<<左シフト演算子を使用し

出典

2017-10-09 22:55:42

役立つだろう：あなたはこれを使用することができますか？ – clabe45

はい、彼はループを使用する必要があります私はちょうどバイナリとして値にアクセスする方法を彼に手がかりを与える –

ありがとう@FerhatBAŞ！本当に明確な説明、私はそこから始めよう！ –

をお楽しみください。

ビット単位AND - 両方のオペランドの対応するビットが1である各ビット位置に1を返します。

左シフト - バイナリ表現でaを左側にシフトします。ビットは、0から右側にシフトします（左に0、）。

Here'sビット演算子を使用して数値のビットを操作する方法についての非常に良い答えです。

ここで、drawAllRectanglesのforループでテストする条件が必要です。そうしないと、すべての四角形が「無条件に」描画されます。おそらく、forループ

if (mask & 1) ...

function drawAllRectangles(data) { 

     //Position, size. 
     var rectWidth = 70; 
     var rectHeigth = 25; 
     var dy = rectHeigth + 15; 
     ctx.fillStyle = "yellow"; 


     var newPos = yPos; 
     var i; 
     for (i = 0; i < maxRectangles; i++) { 
      var mask = 1 << i; 
      // if mask & 1 == 1, then the if statement evaluates to true, as 1 is "truthy" in javascript 
      if (mask & 1) ctx.fillRect(xPos,newPos,rectWidth,rectHeigth); 
     } 
}

出典

2017-10-10 21:22:48 clabe45

各ビットの長方形を描画します。

答えて

関連する問題