HTML 5 холст случайная проблема непрозрачности - PullRequest
Новая
       23

HTML 5 холст случайная проблема непрозрачности

0 голосов
/ 09 июля 2010

Может ли кто-нибудь объяснить мне, почему это не удалось.

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

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

Важный код:

alert (Math.round (Math.random () * 100) / 100); <- Проверяет, является ли вывод таким, каким он должен быть </p>

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

Проверено: 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>

1 Ответ

2 голосов
/ 09 июля 2010

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

Попытка: 

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