Блог

Главная - Вопросы по программированию - Как я могу очистить холст для рисования в JavaScript?

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

#javascript #html #drawing

#javascript #HTML #рисование

Вопрос:

Я новичок в HTML. Просто для удовольствия. Я создавал холст для рисования в HTML, просматривая учебник на YouTube.

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

Я сталкиваюсь с 2 проблемами:

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

  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>`

Комментарии:

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

Ответ №1:

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

  2. Там у вас будет немного больше работы. Внутри функций, запускаемых событиями мыши, вы должны проверить, находится ли мышь над вашим холстом.