Question

在社区的帮助下，我设法完成了我的第一个项目，现在当我尝试创建一个新版本时，我认为我已经理解了它，我再次努力。我已经在整个互联网js文档中搜索过了，但它根本没有做我期望的事情。

有人可以向我解释为什么我要为iData.data对象获取所有颜色吗？根据我的理解

iData.data[i]=(Math.random() < 0.5)? 255 : 0;

声明一个对象，其随机值小于0.5，如果为true，则将值设置为255，否则设置为0;

如何获得其他值，结果似乎随机分布不均匀，但仍然包含我没想到的颜色（不是255 | 0）。

先谢谢。

<script type="application/javascript">
function draw() {

var canvas=document.getElementById("resizable");
var ctx=canvas.getContext("2d");
var iData = ctx.createImageData(canvas.width, canvas.height); 

for(var i=0; i<iData.data.length; i++) //or i=+4
{
    iData.data[i]=(Math.random() < 0.5)? 255 : 0;
//    iData.data[i+1]=(Math.random() < 0.5)? 255 : 0;
//    iData.data[i+2]=(Math.random() < 0.5)? 255 : 0;
//    iData.data[i+3]=(Math.random() < 0.5)? 255 : 0;

}
ctx.putImageData(iData,0,0);
}
</script>

Answer 1

我从w3schools得到了这个，但我修改了一下。希望它有所帮助！

function log(msg) {
    document.body.appendChild(document.createElement('div')).textContent = msg;
}
(function() { // Chrome 45 (BAD) : 0 0 0
    log('No strict mode');
    for (var i = 0; i < 2; ++i) {
        const data = i;
        log(data);
    }
    try {
        log(data); // Should fail
    } catch (e) { log(e); }
})();
(function() { // Chrome 45 (GOOD): 0 1 ReferenceError: data is not defined
    'use strict';
    log('In strict mode');
    for (var i = 0; i < 2; ++i) {
        const data = i;
        log(data);
    }
    try {
        log(data); // Should fail
    } catch (e) { log(e); }
})();

如果你有兴趣看到它在行动，我有jsfiddle。 http://jsfiddle.net/squat/qxba3pxc/

Answer 2

谢谢Cameron，

你的回复帮助我理解了rgba的用法，现在反应终于有意义了。

这是我想要创建的版本：

function draw（）{

    var canvas = document.getElementById("resizable");
    var ctx = canvas.getContext("2d");
    var iData = ctx.createImageData(canvas.width, canvas.height);
    var black = 0;
    var white = 255;


    for (var i = 0; i < iData.data.length; i+=4)
    {
        var dec = (Math.random() < 0.5) ? white : black;
        iData.data[i] = dec;
        iData.data[i+1]=dec;
        iData.data[i+2]=dec;
        iData.data[i+3]=white;

    }
    ctx.putImageData(iData, 0, 0);

}

随机黑白帆布？

2 个答案: