Может ли кто-нибудь объяснить мне, почему это терпит неудачу.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>
возможно дубликат (http://stackoverflow.com/questions/1957346/programatically-use-rgba-values-in-fillstyle -в-холст) –