javascript画布擦除工具不做任何事情 [英] javascript canvas erasing tool doesnt do anything

问题描述

http://joeybabcock.me/tests/php/5.php
我有上面的绘图应用程序基于phpacademy的例子，如果你继续它，你会看到黑色的一个在结束，它应该是一个擦除工具，但我不能得到它的工作，我有以下：

  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属性transparent和一个与rgba（0，0，0，0），但都不工作。

我已经尝试了所有的答案stackoverflow和如果你有一个白色的背景，你可以很容易地使用像

$

解决方案

  function eraser（）{
 context.fillStyle =rgb（255，255，255） 
 context.strokeStyle =rgb（255，255，255）; 
 context.fontStyle =rgb（255，255，255）; 
} 
  

您可以使用一个带有橡皮擦工具的div， onclick =函数

 < div id =eraserclass =eraseronClick =eraser > 
  

如果您有背景图片，则可以随时使用此功能擦除背景图片。

http://joeybabcock.me/tests/php/5.php I have the drawing app above based on phpacademy's example, and if you go on it, you will see the black one on the end, its supposed to be an erase tool, but I can't get it to work, I have the following:

 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);

And also:

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';
}
}

I've tried creating a simple swatch that has the css property "transparent" and also one with "rgba(0, 0, 0, 0)" but neither work.

i've tried all the answers on stackoverflow and google, and many different methods if globalCompositeOperation.

解决方案

If you have a white background you can easily use something like

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

You can have a div with an eraser tool in it or something and then use the onclick="" function

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

If you have a background image, you can always use this to erase the background image.

这篇关于javascript画布擦除工具不做任何事情的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！