Question

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

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

假设我想将我的矩形关联到这个二进制文件（每位一个矩形），我需要为每个位0隐藏每个矩形（或者为每个位{{1}绘制一个矩形}}，随你心意）。

所以（如果我们看看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; }

Answer 1

你应该使用2位运算符＆＃34;＆lt;＆lt;＆＃34; - ＆＃34; LEFT SHIFT＆＃34;，＆＃34;＆amp;＆＃34; - ＆＃34; AND＆＃34;，你可以看到解释你应该做什么

    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

享受

Answer 2

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

按位与 - 在每个位的位置返回一个，两个操作数的相应位都是1。

左移 - 向左移位二进制表示b（<32）位，从右移零。

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

为1

2 个答案: