2010-07-08 5 views
0

누군가가 왜 이것이 실패하는지 설명 할 수 있습니까?HTML 5 캔버스 무작위 불투명도 문제

불투명도를 임의의 값으로로드하려고 시도하는 중입니다.

경고 (Math.round (수학 :

나는이 경고가 분명히 나는 ​​0.00와 1.00

중요 코드 사이의 값을 얻고 있음을 보여주는 경우에도 검은하지만 아무것도 렌더링을 얻을 수 없습니다. 랜덤() * 100)/100); < - 출력이

ctx.fillStyle =해야하는데 어떤 경우 테스트 "RGBA (0, 0, 0, Math.round (인 Math.random()) * 100/100)"을 참조하는 단계; - <는 항상 검은 색으로 테스트

생성 0-1 범위가 허용된다면 그냥보고 잘 2. 추가 위의 경고 상자를 일 사이에 무작위 변수 1. 설정의 불투명도를

<!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 -in-캔버스) –

답변

2

CSS 스타일 문자열 안에 Math.random()에 대한 자바 스크립트를 넣을 수 없습니다. 그 문자열에 연결해야합니다.

시도 [? fillStyle에서는, 프로그램에 에 RGBA 값을 사용]

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

나, 그것은 0 확실히이다 - (가) "+ 변수 varName +"잘 일 경우와 1 BTW 은 재 게시를주의하십시오 여기에 비슷한 주제를 발견 : 를 http://stackoverflow.com/questions/1957346/programatically-use-rgba-values-in-fillstyle-in-canvas – mjrevel

+0

당신의 답을 수정하셨습니다. 그들의 주위에 1/2 응답 버튼이 여기에있다 : P ??? – mjrevel

+0

나는 내 대답을 편집 한 것과 동시에 당신이 논평 한 것은 우연의 일치였습니다. 광산을 응답으로 표시하거나 직접 응답한다고 말하면서 문제를 종결하십시오. – sunetos