如何解决有没有办法在 html 画布上生成随机对比度级别?
我试图在行为实验中将此形状呈现为刺激。我希望图像具有介于 0 和 1 之间的随机对比度级别。我试图为此使用 Math.random() 但是当我在 Chrome 中运行它时,形状在屏幕上显示时会闪烁。有没有办法用随机生成的对比度水平呈现稳定的形状?
drawFunc: function gabor() {
context = jsPsych.currentTrial().context;
context.beginPath();
const gradLength = 100;
const my_gradient = context.createLinearGradient(850,1050,0);
my_gradient.addColorStop(0,'rgb(0,0)');
my_gradient.addColorStop(0.05,'rgb(255,255,255)');
my_gradient.addColorStop(0.1,0)');
my_gradient.addColorStop(0.15,255)');
my_gradient.addColorStop(0.2,0)');
my_gradient.addColorStop(0.25,"rgb(255,255)");
my_gradient.addColorStop(0.3,"rgb(0,0)");
my_gradient.addColorStop(0.35,255)");
my_gradient.addColorStop(0.4,0)");
my_gradient.addColorStop(0.45,255)");
my_gradient.addColorStop(0.5,0)");
my_gradient.addColorStop(0.55,255)");
my_gradient.addColorStop(0.6,0)");
my_gradient.addColorStop(0.65,255)");
my_gradient.addColorStop(0.7,0)");
my_gradient.addColorStop(0.75,255)");
my_gradient.addColorStop(0.8,0)");
my_gradient.addColorStop(0.85,255)");
my_gradient.addColorStop(0.9,0)");
my_gradient.addColorStop(0.95,255)");
my_gradient.addColorStop(1,0)");
var result1 = Math.random();
context.filter = 'contrast('+ result1 +')';
context.fillStyle=my_gradient;
context.fillRect(950,300,gradLength,gradLength);
context.stroke();
解决方法
使用设置函数获取常量
- 创建一次渐变
- 获取上下文一次。
使用函数创建一次对比度。看例子
从绘图功能中删除设置代码。 从绘制函数中删除随机对比度值。
去除多余代码
- 在使用
context.beginPath();
绘制时不需要fillRect
- 不需要
context.stroke()
。不确定为什么要调用 stroke ,因为在beginPath
调用后没有定义路径 - 为什么将命名函数
gabor
分配给对象属性drawFunc
您是使用其名称还是属性调用该函数。您使用的任何一个都会使另一个变得冗余。
示例
setup() {
this.ctx = jsPsych.currentTrial().context;
const g = this.gradient = this.ctx.createLinearGradient(850,1050,0);
const bands = 10,colors = ["#000","#FFF"];
const stops = bands * colors.length;
var pos = 0;
while (pos <= stops) {
g.addColorStop(pos / stops,colors[pos % colors.length]);
pos++;
}
},randomContrast() {
this.contrast = Math.Random();
this.drawFunc();
},drawFunc() {
const ctx = this.ctx;
ctx.filter = 'contrast('+ this.contrast +')';
ctx.fillStyle = this.gradient;
ctx.fillRect(950,300,100,100);
},
调用 setup
一次,然后调用 randomContrast
更改对比度。如果您需要在不改变对比度的情况下重绘渐变调用 drawFunc
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。