2010-07-08 3 views
0

Может ли кто-нибудь объяснить мне, почему это терпит неудачу.HTML 5 проблема случайного непрозрачности холста

Попытка получить непрозрачность для загрузки как случайного значения.

я не могу получить это, чтобы сделать ничего, кроме черного, даже если тревога ясно показывая, что я получаю значения от 0,00 до 1,00

Важное Код:

предупреждение (Math.Round (Math. random() * 100)/100); < - тесты, чтобы увидеть, если вывод, что он должен быть

ctx.fillStyle = "RGBA (0, 0, 0, Math.round (Math.random() * 100)/100)"; < - генерирует как черные, всегда

испытываться: 1. Установите непрозрачность случайных величин между 0-1 работали нормально 2. Добавлена ​​вышеуказанное окно предупреждения только, чтобы увидеть, если диапазоны являются приемлемыми

<!DOCTYPE html> 
<html> 
<head> 
    <script type="application/javascript"> 

//Names must match each element in your html file 
var shapeName = new Object(); 

shapeName = {sWidth: 50, sHeight: 50, nShapes: 3, bSpacing: 10}; 

function getHeight(){ 
    return document.getElementById("canvas1").offsetHeight; 
} 

function getWidth(){ 
    return document.getElementById("canvas1").offsetWidth; 
} 

function draw() { 
//grabbing the height and width of canvas, note that border is effected by this(ex. width of 400 with border 1 will result 402) 
var cWidth = document.getElementById("canvas1").offsetHeight; 
var cHeight = document.getElementById("canvas1").offsetHeight; 

var canvas = document.getElementById("canvas1"); 
var ctx = canvas.getContext("2d"); 
alert(Math.round(Math.random() * 100)/100); 
ctx.fillStyle = "rgba(0, 0, 0, Math.round(Math.random() * 100)/100)"; 
ctx.fillRect (((cWidth/2) + (shapeName.sWidth/2)) - (shapeName.sWidth * shapeName.nShapes + shapeName.bSpacing * shapeName.nShapes)/2, (cHeight/2) - (shapeName.sHeight/2), shapeName.sWidth, shapeName.sHeight); 

ctx.fillStyle = "rgba(0, 0, 300, 1.0)"; 
ctx.fillRect (((cWidth/2) + (shapeName.sWidth/2)) - (shapeName.sWidth * shapeName.nShapes + shapeName.bSpacing * shapeName.nShapes)/2 + 60, (cHeight/2) - (shapeName.sHeight/2), shapeName.sWidth, shapeName.sHeight); 

ctx.fillStyle = "rgb(0,200,0)"; 
ctx.fillRect (((cWidth/2) + (shapeName.sWidth/2)) - (shapeName.sWidth * shapeName.nShapes + shapeName.bSpacing * shapeName.nShapes)/2 + 120, (cHeight/2) - (shapeName.sHeight/2), shapeName.sWidth, shapeName.sHeight); 

ctx.fillStyle = "rgb(222,25,0)"; 
ctx.fillRect (((cWidth/2) + (shapeName.sWidth/2)) - (shapeName.sWidth * shapeName.nShapes + shapeName.bSpacing * shapeName.nShapes)/2 + 180, (cHeight/2) - (shapeName.sHeight/2), shapeName.sWidth, shapeName.sHeight); 
} 
    </script> 
</head> 
<body onload="draw()"> 
    <canvas id="canvas1" width="400" height="300" style="border: 1px solid;"></canvas> 
</body> 
</html> 
+0

возможно дубликат (http://stackoverflow.com/questions/1957346/programatically-use-rgba-values-in-fillstyle -в-холст) –

ответ

2

Вы не можете поместить javascript для Math.random() внутри строки стиля CSS. Это необходимо объединить в строку.

Try: [? Programatically использовать значения RGBa в FillStyle в ]

ctx.fillStyle = "rgba(0, 0, 0, " + Math.random() + ")"; 
+0

Na, это, безусловно, 0 - 1, как и для «+ имяПерем +» работал нормально кстати нашел подобную тему здесь Пожалуйста, примите к сведению REPOST: http://stackoverflow.com/questions/1957346/programatically-use-rgba-values-in-fillstyle-in-canvas – mjrevel

+0

lol, вы отредактировали свой ответ. Их кнопка ответа 1/2 здесь: P ??? – mjrevel

+0

Это было совпадение, которое вы прокомментировали в то же время, когда я отредактировал свой ответ. Или отметьте мой, как ответили, или скажите, что вы сами ответили на него, но, пожалуйста, закройте проблему. – sunetos

Смежные вопросы