为每个为 1 的位绘制矩形答案

【问题标题】：Draw rectangle for each bit that is 1为每个为 1 的位绘制矩形
【发布时间】：2018-03-21 03:59:25
【问题描述】：

我有一个画布，最多可以绘制 16 个矩形。

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

假设我想将我的矩形与这个二进制文件相关联（每个位一个矩形），我需要为0 的每个位隐藏每个矩形（或者为1 的每个位绘制一个矩形，如你喜欢）。

所以（如果我们查看100101101）在我的画布中，我将绘制第一个矩形，然后是一个空格，然后是另外两个矩形，然后是另一个空格，等等。

我在这个问题上摸不着头脑，因为我对按位运算和位掩码真的很陌生。我认为我需要为此使用按位运算和位掩码，但也许不是......

这是我的基本代码（还没有操作我的位的功能）：

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


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

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

		var maxRectangles = 16;

	function drawAllRectangles() {

			//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++) {
	            ctx.fillRect(xPos,newPos,rectWidth,rectHeigth);
	            newPos -= dy;
	        }
    }

		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>

【问题讨论】：

标签： javascript html canvas bit-manipulation bitwise-operators

【解决方案1】：

您应该使用 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

享受

【讨论】：

也许 for 循环会有所帮助？
是的，他应该使用循环，我只是告诉他如何以二进制形式访问值
谢谢@FerhatBAŞ！解释得很清楚，我就从那里开始！
好吧，其实做起来很简单！我以 Fiddle 为例：jsfiddle.net/simon_duchaine/Lx5r2027.

【解决方案2】：

正如 Ferhat BAS 指出的那样，使用 & 按位与运算符和 << 左移运算符。

按位与 - 在两个操作数的对应位均为 1 的每个位位置返回一个。

左移 - 将二进制表示中的 a b (

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

【讨论】：