0

我试图将这种形状呈现为行为实验中的刺激。我希望图像具有介于 0 和 1 之间的随机对比度。我正在尝试使用 Math.random() 但是当我在 Chrome 中运行它时，当它出现在屏幕上时，形状会闪烁。有没有办法用随机生成的对比度水平呈现稳定的形状？

drawFunc: function gabor() {
            context = jsPsych.currentTrial().context;
            context.beginPath();
            const gradLength = 100;
            const my_gradient  = context.createLinearGradient(850, 0, 1050, 0);
            my_gradient.addColorStop(0,'rgb(0, 0, 0)');
            my_gradient.addColorStop(0.05,'rgb(255, 255, 255)');
            my_gradient.addColorStop(0.1,'rgb(0, 0, 0)');
            my_gradient.addColorStop(0.15,'rgb(255, 255, 255)');
            my_gradient.addColorStop(0.2,'rgb(0, 0, 0)');
            my_gradient.addColorStop(0.25,"rgb(255, 255, 255)");
            my_gradient.addColorStop(0.3,"rgb(0, 0, 0)");
            my_gradient.addColorStop(0.35,"rgb(255, 255, 255)");
            my_gradient.addColorStop(0.4,"rgb(0, 0, 0)");
            my_gradient.addColorStop(0.45,"rgb(255, 255, 255)");
            my_gradient.addColorStop(0.5,"rgb(0, 0, 0)");
            my_gradient.addColorStop(0.55,"rgb(255, 255, 255)");
            my_gradient.addColorStop(0.6,"rgb(0, 0, 0)");
            my_gradient.addColorStop(0.65,"rgb(255, 255, 255)");
            my_gradient.addColorStop(0.7,"rgb(0, 0, 0)");
            my_gradient.addColorStop(0.75,"rgb(255, 255, 255)");
            my_gradient.addColorStop(0.8,"rgb(0, 0, 0)");
            my_gradient.addColorStop(0.85,"rgb(255, 255, 255)");
            my_gradient.addColorStop(0.9,"rgb(0, 0, 0)");
            my_gradient.addColorStop(0.95,"rgb(255, 255, 255)");
            my_gradient.addColorStop(1,"rgb(0, 0, 0)");
            var result1 = Math.random();
            context.filter = 'contrast('+ result1 +')';
            context.fillStyle=my_gradient;
            context.fillRect(950,300,gradLength,gradLength);
            context.stroke();
4

1 回答 1

0

使用设置函数获取常量

  • 创建一次渐变
  • 获取上下文一次。

使用函数创建对比度。查看示例

从绘图函数中删除设置代码。从绘图函数中删除随机对比度值。

删除冗余代码

  • context.beginPath();绘制使用时不需要fillRect
  • 不需要context.stroke()。beginPath不知道为什么要调用 stroke，因为调用后没有定义路径
  • 为什么将命名函数分配gabor给对象属性drawFunc您是使用其名称还是属性调用该函数。无论您使用哪个都会使另一个冗余。

例子

setup() {
    this.ctx = jsPsych.currentTrial().context;
    const g = this.gradient = this.ctx.createLinearGradient(850, 0, 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

于 2021-01-05T15:05:01.413 回答