HTML5画布图像颜色根据值更改

Question

我是画布的新手，我需要做以下事情：

鉴于我们有以下代码来更改图像颜色

var myImage = new Image();

cnxt = myCanvas.getContext("2d");

cnxt.drawImage(theImage, 0, 0);
myImage.src = "test.png";
myImage = context.getImageData(0, 0, 200, 200);

var data = myImage.data;

        for (var i = 0; i < data.length; i += 4) {
          //red bytes
          myImage.data[i] = 0;
          // green bytes
           myImage.data[i+1] = val;
          // blue bytes.
          myImage.data[i+2] = val;
          //alpha bytes
          myImage.data[i+2] = val;
        }

cnxt.putImageData(myImage, 0, 0);

我需要根据页面上的输入文本字段值更改图像颜色，表示范围从0到100，图像颜色从黄色变为蓝色。有人可以帮忙吗？我们如何更改图像数据以接受一系列数字并影响图像颜色？！