如何清除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中的繪圖畫布？

回答

相關問題