Javascript/HTML5 - 마우스 이벤트의 텍스트 변경

텍스트를 표시하는 HTML5 캔버스를 작성하려고하는데 onmouseover가 해당 텍스트를 제거하고 다른 텍스트 비트를 표시합니다.Javascript/HTML5 - 마우스 이벤트의 텍스트 변경

이것은 색상을 변경하는 데 적합합니다. 기본적으로 현재 캔버스 위에 새로운 캔버스를 만듭니다.

그러나 새 텍스트는 표시되지만 이전 텍스트는 그대로 유지됩니다.

는 HTML :

<body onload="changeBack()"> 
    <canvas id="test" 
      width="330" 
      height="200" 
      style="border:1px solid #787878;" 
      onmouseover="change()" 
      onmouseout="changeBack()"> 
    </canvas>

자바 스크립트 :

function changeBack() { 
    var c = document.getElementById("test"); 
    var ctx = c.getContext("2d"); 
    ctx.fillStyle = "blue"; 
    ctx.font = "bold 16px Arial"; 
    ctx.fillText("hello", 100, 100); 
} 

function change() { 
    var c = document.getElementById("test"); 
    var ctx = c.getContext("2d"); 
    ctx.fillStyle = "blue"; 
    ctx.font = "bold 16px Arial"; 
    ctx.fillText("world", 100, 100); 
}

출처

2015-01-28 joshnik

이보십시오. 그것을 그리기 전에 캔버스를 지 웠습니다. 여기

function changeBack() { 
    var c = document.getElementById("test"); 
    var ctx = c.getContext("2d"); 
    ctx.clearRect (0 , 0 , c.width, c.height); 
    ctx.fillStyle = "blue"; 
    ctx.font = "bold 16px Arial"; 
    ctx.fillText("hello", 100, 100); 
} 


function change() { 

    var c = document.getElementById("test"); 
    var ctx = c.getContext("2d"); 
    ctx.clearRect (0 , 0 , c.width, c.height); 
    ctx.fillStyle = "red"; 
    ctx.font = "bold 16px Arial"; 
    ctx.fillText("world", 100, 100); 

}

데모를 http://jsfiddle.net/3j2b2egb/1/

을하고있다

출처

2015-01-28 11:01:39

Javascript/HTML5 - 마우스 이벤트의 텍스트 변경

답변

관련 문제