JS를 사용하여 점차적으로 색이 바래다

버튼을 누른 후 자바 스크립트를 사용하여 직사각형을 노란색에서 흰색으로 점진적으로 색을 변이 시키려고합니다. 슬프게도 내 코드가 작동하지 않습니다. 코드의 문제점과 해결 방법을 알아내는 데 도움을 줄 수 있습니까?JS를 사용하여 점차적으로 색이 바래다

저는 방금 Javascript를 공부하기 시작했습니다. 죄송합니다.이 질문이 멍청한 것이면. 미리 감사드립니다. 당신은 거의 비록 당신의 코드로이

<!DOCTYPE html> 
<html> 
<body> 

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag.</canvas> // create canvas to work with 

<button onclick="fade(ctx)">Change the colour!</button> 

<script> 

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); //set context 
ctx.rect(20, 20, 150, 100); // draw a rectangle 
ctx.stroke(); // with border 
ctx.fillStyle="#FFFF00"; // fill with yellow 
ctx.fillRect(20,20,150,100); 

function fade(ctx) { // fade function responsible for changing colour 

var dom = getElementById(ctx), level = 1; // new object based on rectangle object, initial iterator is set to 1 

function step() { // inner step function 
    var h = level.toString(16); 
    dom.fillStyle = '#FFFF' + h + h; // construct a new colour using h variable 

    if (level < 15) { 
    level += 1; 
    setTimeout(step, 100); // do this after every 100 ms 
    } 

    } 

    setTimeout(step, 100); 
} 

</script> 

</body> 
</html>

출처

2016-10-06 B. Nielsen

왜 CSS를 사용하지 않습니까? –

Javascript를 배우려고하고 있으며 내부 함수 및 시간 초과를 사용하는 방법을 배우고 싶습니다. CSS를 사용하여 점진적으로 색상을 변경하는 방법을 잘 모르겠습니다. –

여기의 CSS 만 : http://codepen.io/impressivewebs/pen/zohgt –

이 내 코드입니다. 이미 문맥을 함수에 전달하고 있으므로 getElementById(ctx) 비트가 필요하지 않습니다. 사실 그것은 오류를 줄 것이므로 코드에서 해당 행을 제거하십시오.

ctx.fillStyle = '#FFFF' + h + h;

그리고 당신은 또한 사각형을 다시 그릴 필요가 있기 (위해) 때문에,이 줄을 추가 : 대신 직접이 같은 CTX 변수에 fillStyle에서는 설정이 색상을 설정 한 후

ctx.fillRect(20,20,150,100);

합니다. 그리고 그렇게 할 것입니다.

출처

2016-10-06 15:16:47

도움을 주셔서 감사합니다. 나는 꽤 정확하게 getElementById (ctx)를 제거하지 못했고, 나는 생각하기에, 어쨌든 객체에 'level'속성을 추가해야 할 필요가있다. 귀하의 답변에 따라 다음과 같이 변경하려고 시도했지만 여전히 효과가 없습니다. 아마 내가 당신이 제안한 변경 사항을 이해하지 못했습니다 : [링크] http://pastebin.com/mBSq8Rum (http://pastebin.com/mBSq8Rum) –

그래서 그냥 DOM 변수의 선언을 제거, 당신은 여전히 레벨 변수가 필요합니다. 그 라인은 다음과 같아야한다.'var level = 1;'그렇지 않으면 코드가 올바르게 보인다. –

좋아요! 나는 변화를 만들었고 효과가 있었다! 고마워요! [http://pastebin.com/kyTAktTn](http://pastebin.com/kyTAktTn) –

JS를 사용하여 점차적으로 색이 바래다

답변

관련 문제