如何清除JavaScript中的绘图画布？

我是新来的HTML。只是为了好玩。我通过观看YouTube上的教程制作了HTML中的绘图画布。如何清除JavaScript中的绘图画布？

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

我面临两个问题：

当我清除画布，画笔不能正常所示的图像工作。

当我绘制或超过画布的边缘时，画笔仍然在画布中拖动。我希望它在接触边缘时停止绘图。我该怎么做？

*{ 
    -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中的绘图画布？

回答

相关问题