Как я могу очистить холст чертежа в JavaScript?

Я новичок в HTML. Просто для удовольствия. Я делал рисовальный холст в HTML, наблюдая за учебником на YouTube.Как я могу очистить холст чертежа в JavaScript?

Код моделируется здесь: https://jsfiddle.net/MasoodSalik/yr1ezp4x/

Я столкнулся 2 проблемы:

Когда я очистить холст, щетка не работает должным образом, как показано на рисунке.

Когда я рисую или перевыполняю края холста, кисть остается перетаскиванием в холст. Я хочу, чтобы он прекратил рисовать, когда он касается краев. Как мне это сделать?

*{ 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    font-family:sans-serif; 

    user-select: none; 
    -webkit-user-select:none; 
    user-select: none; 

} 


#toolbara{ 
width :329px; 
height :40px; 
    padding:10px; 
    position: relative; 
    top:0px; 
    background-color:#2f2f2f; 
    color: white; 
    } 


.radcontrol{ 
    width : 30px; 
    height : 20px; 
    background-color:#4f4f4f; 
    display:inline-block; 
    text-align:center; 
} 

#rad{ 
    float:left; 
} 
#colour{ 
//position: relative; 
    float:center; 
} 

.swatch{ 
    width:20px; 
    height:20px; 
    border-radius:10px; 
    box-shadow: inset 0px 2px 0px rgba(255,255,255,0.5), 0px 2px 2px rgba(0,0,0,0.5); 
    display:inline-block; 
    margin-left:5px; 
    margin-bottom:50px; 
    background-color:cyan; 
} 
.swatch.active{ 
    border:2px solid white; 
    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.5) ; 

} 
#save{ 
    background-color: #4f4f4f; 
    // width: 50px; 
    padding: 5px; 
    position: relative; 
    float :right; 
    top:-45px; 
    right: 60px; 
    margin-right:0px; 
} 
#save:hover{ 
    background-color: #818181; 

} 

#clear{ 
    background-color: #4f4f4f; 
    // width: 50px; 
    padding: 5px; 
    position: relative; 
    float :right; 
    top:-45px; 
    right: -40px; 
// margin-right:0px; 
} 
#clear:hover{ 
    background-color: #818181; 

} 

</style> 


<canvas id="canvas" width="325" height="500" style="border:2px solid"> 
<p>Your browser doesn't support canvas.</p> 
</canvas> 

<div id ="toolbara"> 
    <div id="rad"> 
     Radius <span id="radval">1</span> 
     <div id="decrad" class="radcontrol">-</div> 
     <div id="incrad" class="radcontrol">+</div> 
    </div> 
    <div id="colors"> 
    </div> 
    <div id="save"> Save </div> 
    <div id="clear"> Clear </div> 
</div> 

<script> 

var canvas=document.getElementById('canvas'); 
var context=canvas.getContext('2d'); 
var radius=5; 
var dragging=false; 

context.beginPath(); 
context.rect(0, 0, canvas.width, canvas.height); 
context.fillStyle = "white"; 
context.fill(); 
context.beginPath(); 

context.lineWidth=radius*2; 

var putPoint = function(e){ 
    if(dragging) { 
    context.lineTo(e.offsetX, e.offsetY); 
    context.stroke(); 
    context.beginPath(); 
    context.arc(e.offsetX, e.offsetY, radius, 0, Math.PI*2); 
    context.fill(); 
    context.beginPath(); 
    context.moveTo(e.offsetX, e.offsetY); 
} 
} 

var engage=function(e) 
{ dragging=true; 
    putPoint(e); 
} 

var disengage=function() 
{ 
dragging=false; 
context.beginPath(); 
} 

    canvas.addEventListener('mousedown',engage); 
    canvas.addEventListener('mouseup',disengage); 
    canvas.addEventListener('mousemove',putPoint); 

var setRadius = function (newRadius) { 
       if (newRadius < minRad) newRadius = minRad; 
       else if (newRadius > maxRad) newRadius = maxRad; 
       radius = newRadius; 
       context.lineWidth = radius * 2; 

       radSpan.innerHTML = radius; 
      } 

    //////////////////////////////////////// 
var minRad = 1, 
       maxRad = 10, 
       defaultRad = 1, 
       interval = 1, 
       radSpan = document.getElementById('radval'), 
       decRad = document.getElementById('decrad'), 
       incRad = document.getElementById('incrad'); 

      decRad.addEventListener('click', function() { 
       setRadius(radius - interval); 
      }); 
      incRad.addEventListener('click', function() { 
       setRadius(radius < interval ? interval : radius + interval); 
      }); 

      setRadius(defaultRad); 
    ////////////////////////////////////////////////////// 

var colors = ['black', 'white', 'red', 'yellow', 'green', 'blue']; //Color array to select from 
/*Handles the creation of color*/ 
for(var i=0, n=colors.length;i<n; i++){ 
var swatch = document.createElement('nav'); 
swatch.className = 'swatch'; 
swatch.style.backgroundColor = colors[i]; 
swatch.addEventListener('click',setSwatch); 
document.getElementById('colors').appendChild(swatch); 
} 
/*set color*/ 
function setColor(color){ 
context.fillStyle = color; 
context.strokeStyle = color; 
var active = document.getElementsByClassName('active')[0]; 
if(active){ 
active.className = 'swatch'; 
} 
} 
function setSwatch(e){ 
//identify swatch 
var swatch = e.target; 
//set color 
setColor(swatch.style.backgroundColor); 
//give active class 
swatch.className += ' active'; 
} 
setSwatch({target: document.getElementsByClassName('swatch')[0]}); //set default swatch 

////////////////////////////////////// 

var button = document.getElementById('save'); 
      button.addEventListener('click', saveImage) 

function saveImage()   
{  // context.clearRect(0, 0, canvas.width, canvas.height); 
       var data = canvas.toDataURL(); 

      window.open(data,'_blank,','location=0,menubar=0') 
      // button.href = dataURL; 
      }; 

var butonclear = document.getElementById('clear'); 
      butonclear.addEventListener('click', clearImage) 

function clearImage()   
{  
      context.clearRect(0, 0, canvas.width, canvas.height); 
context.beginPath(); 
context.rect(0, 0, canvas.width, canvas.height); 
context.fillStyle = "white"; 
context.fill(); 
context.beginPath(); 
context.moveTo(e.offsetX, e.offsetY); 


     };   

</script> 


<!link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B7ZbA61nROnAMkFzSDVoOWdCWkk/noselect.css"></!link></!link>`

источник

2016-10-03 Masood Salik

У меня нет времени, чтобы написать и исследовать формальный ответ, но я думаю, что ваша проблема заключается в том, что вы устанавливаете fillStyle в белый цвет, а затем просто оставляете его. Вы должны временно установить его на белый для прозрачного, а затем установить его обратно в то, что было раньше. Это может быть другое свойство, но проблема заикания исчезает, когда вы выбираете цвет снова. – radicaledward101

щетки не работает должным образом вызвать, когда вы звоните ClearImage() вы изменяете context.fillStyle белый, также context.moveTo(e.offsetX, e.offsetY); это лишнее. Посмотрите, что воспроизводится https://jsfiddle.net/yr1ezp4x/2/
Там у вас будет немного больше работы. Внутри функции, вызванные событиями мыши, вы должны проверить, находится ли мышь над вашим холстом.

источник

2016-10-03 20:39:06 Kuba

Как я могу очистить холст чертежа в JavaScript?

ответ

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