HTML 5 problème d'opacité aléatoire de toile

Quelqu'un pourrait m'expliquer pourquoi cela échoue.HTML 5 problème d'opacité aléatoire de toile

Essaie d'obtenir l'opacité à charger en tant que valeur aléatoire.

Je ne peux pas obtenir ce pour rendre à quoi que ce soit, mais le noir, même si l'alerte montre clairement que je reçois des valeurs comprises entre 0,00 et 1,00

code Important:

alerte (Math.round (Math. random() * 100)/100); < - Tests pour voir si la sortie est ce qu'il est censé être

ctx.fillStyle = "RGBA (0, 0, 0, Math.round (Math.random() * 100)/100)"; < - génère en noir, toujours

Testé: 1. Définir l'opacité à des variables aléatoires entre 0-1 ont fonctionné très bien 2. Ajout de la zone d'alerte ci-dessus juste pour voir si les plages étaient acceptables

<!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>

Source

2010-07-08 mjrevel

double possible (http://stackoverflow.com/questions/1957346/programatically-use-rgba-values-in-fillstyle -en-toile) –

Vous ne pouvez pas mettre le javascript pour Math.random() dans la chaîne de style CSS. Cela doit être concaténé à la chaîne.

Essayez: [? Utiliser Programatically rgba dans fillStyle

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

Source

2010-07-08 22:59:59 sunetos

Na, il est certainement 0 - 1. comme pour le « + varname + » travaillé très bien BTW trouvé sujet similaire ici S'il vous plaît prendre note de republication: http://stackoverflow.com/questions/1957346/programatically-utiliser-rgba-values-in-fillstyle-in-canvas – mjrevel

lol, vous avez édité votre réponse. Est-ce leur un bouton de réponse 1/2 ici: P ??? – mjrevel

Ce fut une coïncidence que vous ayez commenté en même temps que j'ai édité ma réponse. Soit marquer le mien comme étant répondu, soit dire que vous avez répondu vous-même, mais s'il vous plaît, fermez le problème. – sunetos

HTML 5 problème d'opacité aléatoire de toile

Répondre

Questions connexes