2010-04-27 5 views
3

동일한 캔버스에서 2 개의 캔버스를 만들었습니다. 작은 검은 색을 주위로 끌 수 있습니까? 나는 그것을 드래그 가능하게하고 싶지만 이것에 대한 온라인 튜토리얼이나 데모는 찾을 수 없습니다. 가능한가? Canvas moveTo 또는 전환으로 보았지만 제대로 작동하지 못했습니다.HTML5 move Canvas 객체

코드는 http://jsfiddle.net/35P9F/2/

var ctx = document.getElementById('canvas').getContext('2d'); 

    var radgrad3 = ctx.createLinearGradient(255,10,0,180,80,190); 
    radgrad3.addColorStop(0, '#00C9FF'); 
    radgrad3.addColorStop(1, 'red'); 

    ctx.fillStyle = radgrad3; 
    ctx.fillRect(0,0,255,255); 



    var ctx4 = document.getElementById('canvas').getContext('2d'); 
    var radgrad4 = ctx4.createLinearGradient(0, 0, 0, 255); 
    radgrad4.addColorStop(0, '#000000'); 
    radgrad4.addColorStop(1, '#ff0000'); 

    ctx4.fillStyle = radgrad4; 
    ctx4.fillRect(0,0,25,25); 

감사합니다 여기에있다.

답변

10

짧은 대답 : 자동 응답 방법이 없습니다.

긴 대답 : <canvas>은 "직접 모드"드로잉을 사용합니다. 즉, 이전에 수행 한 작업을 기억하지 못합니다. 명령을 내리면 즉시 화면의 픽셀로 렌더링 한 다음이를 잊어 버립니다. 화면에 무언가가 마우스에 응답하는 것처럼 보이게하려면 자신을으로 추적하고 매 프레임마다 화면 전체를 다시 그리며 검은 사각형을 매번 다른 위치에 놓아야합니다.

대신에 "보유 모드"그래픽 요소가 필요합니다. 즉, 수행 한 작업을 기억하고 마지막 순간에 상황을 픽셀 단위로 바꾸는 것입니다. SVG는 이것의 훌륭한 예입니다. SVG에서 무언가를 그릴 때 HTML과 마찬가지로 실제 요소를 만들고 매번 전체 장면을 다시 만들 필요없이 속성을 변경하여 이동하거나 변경할 수 있습니다. 내가 잘못 아니에요 경우, 당신이 원하는하는 것은이 예에서 찾아 볼 수있다