Javascript 在 Canvas 旋转时查找像素

标签 javascript canvas

我正在尝试在 Canvas 上(以各种 Angular )书写旋转文本,但不希望文本重叠。因此,在旋转 Canvas 之后和填充文本之前,我尝试使用 measureText().widthgetImageData() 来测试文本背景,以查看是否已经没有文本弄乱新的。旋转 Canvas 时我找不到文本(彩色像素)。这是我的问题的简化版本(使用矩形)。我想知道为什么没有找到彩色像素?

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid black;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var cWidth=300, cHeight= 150;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Rotate context around centre point
ctx.translate( cWidth/2, cHeight/2);
ctx.rotate(20 * Math.PI / 180);

// Draw 100x50px rectangle at centre of rotated ctx
ctx.fillStyle = "yellow";
ctx.fillRect(-50, -25, 100, 50);

// Is my rotated rectangle really there? 
// i.e. any coloured pixels at rotated cxt centre
imgData = ctx.getImageData(-50, -25, 100, 50);

// All rectangle pixels should be coloured
for (var j=0; j<imgData.data.length; j++){
	if (imgData.data[j] > 0){
		alert ("Coloured");
		break;
	};
};

// Why none is found?

</script>

</body>
</html>
黄色矩形应与被测图像数据区域处于同一点和同一 Angular 。什么地方出了错?如何测试旋转区域的颜色?作为 Javascript 的新手,我在这个阶段尽量避免使用库。

佩卡

最佳答案

问题是翻译功能。您需要考虑位移。

试试这个:

imgData = ctx.getImageData(-50+cWidth/2,-25+cHeight/2,100,50);

关于Javascript 在 Canvas 旋转时查找像素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38048356/

相关文章:

javascript - 我的 AngularJS 页面卡在移动版本和谷歌浏览器控制台不显示任何错误消息

html - 通过鼠标和触摸在 Canvas 上绘图

javascript - 检测 Canvas 内的鼠标点击位置

javascript - 如何引用 PreloadJS 中预加载的图片

android canvas 画线,两边都有指针结束的箭头。谁能帮我解决这个问题。?

javascript - 从滚动切换到固定时如何让背景图像保持不变?

javascript - 作为 window.requestAnimationFrame() 参数的回调函数

javascript - 多次将输入添加到本地存储中

javascript - 如何检测特定 div 何时不在 View 中

javascript - 如何使用HTML5 canvas和three.js实现4点透视变换?