为每个位绘制矩形即为1

我有一个画布，最多可以绘制16个矩形。为每个位绘制矩形即为1

我收到来自服务器的这个二进制数：100101101（或301十进制）。

假装，我想我的矩形关联到这个二进制文件（每比特一个矩形），我需要隐藏的是0每个比特的每个矩形（或绘制一个矩形因为这是1的每一位，只要你喜欢）。

所以（如果我们看一下100101101）在我的画布我会第一个矩形绘制，然后是一个空格，然后两个矩形，然后另一个空间等

我抓我的头了很多围绕这一点，因为我真的不熟悉按位操作和位掩码。我想，我需要使用位运算和位掩码这一点，但也许不是...

这是我的基本代码（无功能来操纵我的位还）：

\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位运算符是“< <” - “左移”，“&‘ - ’和”，你可以看到解释你应该做的是什么

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

享受

来源

2017-10-09 22:55:42

也许一个for循环将帮助？ – clabe45

是的，他应该使用循环我只是给他提供线索如何访问价值作为二进制 –

谢谢@FerhatBAŞ！真的很清楚的解释，我会从那里开始！ –

由于Ferhat BAS指出，使用&位AND运算符，以及<<左移运算。

按位与 - 返回两个操作数的相应位为1的每个位的位置。

左移 - 将二进制表示b（< 32）位左移一位，右移0位。

Here's关于如何使用按位运算符来处理数字的位，一个非常好的答案。

现在，您需要一个条件来测试drawAllRectangles中的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

为每个位绘制矩形即为1

回答

相关问题