javascript canvas erasing tool ничего не делает

http://joeybabcock.me/tests/php/5.php У меня есть приложение для рисования выше, основанное на примере phpacademy, и если вы его нажмете, вы увидите черный на конце, который должен быть инструментом стирания, но я не может заставить его работать, я следующее:javascript canvas erasing tool ничего не делает

var swetch = document.createElement('div');  
swetch.className = 'swetch'; 
swetch.style.backgroundColor = "rgba(0,0,0,0)"; 
swetch.addEventListener('click', setEraser); 
document.getElementById('colors').appendChild(swetch);

а также:

function setEraser(){ 
context.fillStyle = "rgba(0,0,0,0)"; 
context.globalCompositeOperation = "destination-out"; 
context.strokeStyle = "rgba(0,0,0,0)"; 
swetch.className += ' active'; 
var active = document.getElementsByClassName('active')[0]; 
if(active){ 
    active.className = 'swatch'; 
} 
}

Я попытался создать простой образец, который имеет свойство CSS «прозрачный», а также один с «rgba (0, 0, 0, 0)», но не работают.

Я пробовал все ответы на stackoverflow и google и многие другие методы, если globalCompositeOperation.

источник

2014-02-01 joeybab3

Где «контекст» объявлен и инициализирован? – Bergi

oh sorry, drawer3.js, var canvas = document.getElementById ('canvas'); var context = canvas.getContext ('2d'); – joeybab3

@ joeybab3 - В холсте белая кисть - это * ластик. Рисуя прозрачно, он ничего не сделает (потому что прозрачный + что-то еще ничего не меняется) –

Вот простой пример, который использует композицию «destination-out» для стирания заливки переднего плана, чтобы открыть фоновое изображение.

композиция-адресат будет «удалять» существующее содержимое везде, где нарисованы новые штрихи.

В этом примере:

Фона холст имеет изображение
передний план холст точно перекрывает фон холсту
передний план холст сначала заполняются непрозрачным цветом
globalCompositeOperation =» destination-out "используется для« удаления »непрозрачного цвета, чтобы выявить части изображения ниже.

Демо: http://jsfiddle.net/m1erickson/fjTLF/

enter image description here

Код:

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    #wrapper{ 
     position:relative; 
     width:300px; 
     height:300px; 
    } 
    #canvasTop,#canvasBottom{ 
     position:absolute; top:0px; left:0px; 
     border:1px solid green; 
     width:100%; 
     height:100%; 
    } 
    #canvasTop{ 
     border:1px solid red; 
    } 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvasTop"); 
    var ctx=canvas.getContext("2d"); 
    var canvas2=document.getElementById("canvasBottom"); 
    var ctx2=canvas2.getContext("2d"); 

    var canvasOffset=$("#canvasTop").offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 

    var startX; 
    var startY; 
    var isDown=false; 

    var img=new Image(); 
    img.onload=function(){ 
     canvas.width=canvas2.width=img.width; 
     canvas.height=canvas2.height=img.height; 
     ctx.lineWidth=10; 
     ctx.lineCap = "round"; 
     ctx.lineJoin = "round"; 
     ctx.fillStyle="skyblue"; 
     ctx.fillRect(0,0,canvas.width,canvas.height); 
     ctx2.drawImage(img,0,0); 
    }; 
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png"; 

    function handleMouseDown(e){ 
     e.preventDefault(); 
     startX=parseInt(e.clientX-offsetX); 
     startY=parseInt(e.clientY-offsetY); 
     isDown=true; 
    } 

    function handleMouseUp(e){ 
     e.preventDefault(); 
     isDown=false; 
    } 

    function handleMouseOut(e){ 
     e.preventDefault(); 
     isDown=false; 
    } 

    function handleMouseMove(e){ 
     if(!isDown){return;} 
     mouseX=parseInt(e.clientX-offsetX); 
     mouseY=parseInt(e.clientY-offsetY); 

     // Put your mousemove stuff here 
     ctx.save(); 
     ctx.globalCompositeOperation="destination-out"; 
     ctx.beginPath(); 
     ctx.moveTo(startX,startY); 
     ctx.lineTo(mouseX,mouseY); 
     ctx.stroke(); 
     startX=mouseX; 
     startY=mouseY; 
    } 

    $("#canvasTop").mousedown(function(e){handleMouseDown(e);}); 
    $("#canvasTop").mousemove(function(e){handleMouseMove(e);}); 
    $("#canvasTop").mouseup(function(e){handleMouseUp(e);}); 
    $("#canvasTop").mouseout(function(e){handleMouseOut(e);}); 

}); // end $(function(){}); 
</script> 
</head> 
<body> 
    <div id="wrapper"> 
     <canvas id="canvasBottom" width=300 height=300></canvas> 
     <canvas id="canvasTop" width=300 height=300></canvas> 
    </div> 
</body> 
</html>

источник

2014-02-01 22:06:50 markE

Если у вас есть белый фон вы можете легко использовать что-то вроде

function eraser(){ 
     context.fillStyle = "rgb(255, 255, 255)"; 
     context.strokeStyle = "rgb(255, 255, 255)"; 
     context.fontStyle = "rgb(255, 255, 255)"; 
    }

Вы можете иметь div wi го ластик в нем или что-то, а затем использовать OnClick = «» функция

<div id="eraser" class="eraser" onClick="eraser()">

Если у вас есть фоновое изображение, вы всегда можете использовать эту функцию, чтобы удалить фоновое изображение.

источник

2014-02-01 23:10:31 TestUser1

javascript canvas erasing tool ничего не делает

ответ

Смежные вопросы