如何清除JavaScript中的绘图canvas？

Question

我是 HTML 的新手。只是为了好玩。我通过观看 YouTube 上的教程在 HTML 中画了一幅画 canvas。

这里模拟代码： https://jsfiddle.net/MasoodSalik/yr1ezp4x/

我面临两个问题：

当我清除canvas时，刷子无法正常工作，如图所示。

当我绘制或超出 canvas 的边缘时，笔刷仍然在 canvas 中拖动。我希望它在触及边缘时停止绘制。我该怎么做？

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

Answer 1

画笔无法正常工作，因为当您调用 clearImage() 时，您正在将 context.fillStyle 更改为白色，而且 context.moveTo(e.offsetX, e.offsetY); 也没有必要。看看重现 https://jsfiddle.net/yr1ezp4x/2/
在那里你会有更多的工作。由鼠标事件触发的内部函数你必须检查鼠标是否在你的 canvas 上。

如何清除JavaScript中的绘图canvas？

How can I clear the drawing canvas in JavaScript?

html

javascript

drawing