HTML画布上的颜色图
[英]color map on HTML canvas
问题描述
我是HTML和JavaScript的新手，所以如果这个问题很琐碎，请宽容，但我仍然非常感谢您的帮助。 :)
我正在尝试使用从离散位置的传感器读取的点数据绘制压力图。 在此，我将每个压力传感器下的压力分布近似为“抛物面分布”。 也就是说，假设压力分布呈抛物线形，其中心坐标等于传感器的位置，中心高度等于相应传感器的读数。 因此，在其他相邻点找到压力的公式如下。
（x，y）点处的压力=-（x-x峰值坐标）^ 2 /（（传感器半径）^ 2 /峰值高度）-（y-y峰值坐标）^ 2 /（（传感器半径） ^ 2 /峰高）+峰高
这只是抛物面（（x ^ 2 / a）+（y ^ 2 / a）+ z = 0）的正态方程，将其调整为具有所需的中心位置和所需的峰高。
这是我用来生成压力图的代码。 （仅考虑一个位于250,250且读数为500的传感器）
<html> <body> <canvas id = 'myCanvas' width = "600" height = "600" style = 'width:600px; height:600px; float:center;'> No Image </canvas> <button type="button" onclick="createFootMap()">Click Me!</button> <script> function mapAColor(p){ rComponent = 0; gComponent = 0; bComponent = 0; pressureVal = p; if (pressureVal < 128){ rComponent = 0; gComponent = pressureVal * 2; bComponent = 255; } else if (pressureVal < 256) { rComponent = 0; gComponent = 255; bComponent = (255 - pressureVal) * 2 + 1; } else if (pressureVal < 384) { rComponent = (pressureVal - 256) * 2; gComponent = 255; bComponent = 0; } else if (pressureVal < 512) { rComponent = 255; gComponent = (511 - pressureVal)*2 + 1; bComponent = 0; } var s = "rgb(" + rComponent + "," + gComponent + "," + bComponent + ")"; return s; } function createFootMap(){ var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var i = 0; var j = 0; var radius = 50; var center_x = 250; var center_y = 250; var peak = 500; var p = 0; for(i = 0; i < 500; i++){ for(j = 0; j < 500; j++){ p = -(Math.pow((i - center_x), 2) / (Math.pow(radius, 2) / peak)) - (Math.pow((j - center_y), 2) / (Math.pow(radius, 2) / peak)) + peak; ctx.fillStyle = mapAColor(p); ctx.fillRect(i, j, 1, 1); } } } </script> </body> </html>
结果如下。
r = 50，峰值= 500
但是，当我更改半径或峰值压力值时，结果将变得无法接受。
r = 50，峰值= 350
我在matlab中运行了相同的代码，无论使用什么半径和峰值，我都能获得平滑的圆形颜色图。 因此，如果与JavaScript语法相关的代码有什么错误，请告诉我:)
谢谢。
1 个解决方案
解决方案1
0 2017-02-25 06:37:02
问题在于变量“ p”是一个十进制值。 （非整数，如Daniel T在他的第一个评论中所述：））因此，当我将“ p”值传递给函数mapAColor时，它将返回带有红色，绿色，蓝色分量十进制值的rgb格式。 因此，我发言了'p'并将其作为mapAColor函数的参数发送。 下面显示的是正确的代码。
for (i = 0; i < 500; i++) { for (j = 0; j < 500; j++) { p = -(Math.pow((i - center_x), 2) / (Math.pow(radius, 2) / peak)) - (Math.pow((j - center_y), 2) / (Math.pow(radius, 2) / peak)) + peak; ctx.fillStyle = mapAColor(Math.floor(p)); //corrected line ctx.fillRect(i, j, 1, 1); } }
希望这对对这篇文章感兴趣的人有所帮助。 感谢所有花费宝贵时间帮助我在代码中找到错误的人。 :)如果我的解释错误，请纠正我。 :)
HTML 5画布填充颜色
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.