2015-09-19 79 views
0

在社區的幫助下,我設法完成了我的第一個項目,現在當我嘗試創建新版本時,我認爲我已經理解了它,但我再次掙扎。我搜查了整個互聯網js文件等,但它根本沒有做我期望的..隨機黑白畫布?

有人可以向我解釋爲什麼我得到的所有顏色的iData.data對象? 從我的理解

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

聲明相比,小於0.5, 如果真值設置爲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> 

回答

0

我從w3schools得到了這個,但我修改了一下。希望能幫助到你!

var black = [0, 0, 0, 255]; 
var white = [255, 255, 255, 255]; 
var colors = [black, white]; 

function fillImageData(imgData, rgba) { //fills the image data with one color 
    var i; 
    for (i = 0; i < imgData.data.length; i += 4) { 
    imgData.data[i+0] = rgba[0]; 
    imgData.data[i+1] = rgba[1]; 
    imgData.data[i+2] = rgba[2]; 
    imgData.data[i+3] = rgba[3]; 
    } 
    return imgData; 
} 

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
var imgData = ctx.createImageData(100, 100); 

var choice = Math.round(Math.random()); //picks 0 or 1 as the index 

imgData = fillImageData(imgData, colors[choice]); 

ctx.putImageData(imgData, 10, 10); 

我有jsfiddle,如果你有興趣看到它的行動。 http://jsfiddle.net/squat/qxba3pxc/

0

感謝卡梅隆,

您的回覆幫助我瞭解RGBA的使用,現在終於反應是有道理的。

這是我的版本是什麼我想創造:

函數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); 

}