清除畫布按鈕/ HTML工作不

所以我的代碼顯示一個HTML頁面，上面有一些文字，然後在下面，我有一個「明確的畫布」按鈕，我想有明確的畫布上一次推，然後是能夠在這張空白的畫布上畫畫。我清晰的畫布按鈕不起作用，一旦推動就不會做任何事情。我正在使用回調函數來清除畫布，並將html文件連接到一個JavaScript文件，然後在新的清除畫布上繪製事物。這裏的第一個代碼是清除畫布的.html文件，該文件也加入了.js文件。清除畫布按鈕/ HTML工作不

我試圖context.Rect（X，Y，W，H）; 和canvas.width.canvas.width; 並且都不起作用。我使用Chrome

<html><head></head> 
    <h3> </h3> 
    <body > 
    <canvas id="main" width="300" height="500"></canvas> 

    <script> 
    var canvas = document.getElementById("main"); 
    var context = canvas.getContext('2d'); 
    context.fillStyle = "#008000"; 
    context.rect(0,0,300,300); 
context.fill(); 

</script> 
    </body></html> 

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta name="viewport" content="user-scalble=no,initial-scale=1.0,maximum-scale=1.0" /> 
<style> 
body { padding:10px; margin:0px; background-color: #FF9; } 
#main { margin: 10px auto 0px auto; } 
</style> 
<script src=".js"></script> 
</head> 
<body > 
<button id="clear">Clear Canvas</button><br> 
<canvas id="main" width="300" height="500"></canvas> 
</body> 
    </html> 
    //end of .html file 

// JavaScript Document 
// wait until window is fully loaded into browser 
window.onload = function() 
{ 
    // so smart phone does not move/resize image when touched 
document.ontouchmove = function(e) 
    { 
    e.preventDefault(); 
    } 
    var canvas = document.getElementById('main'); 
    // Number of pixels used by the Clear button above canvas 
    var canvasTop = canvas.offsetTop; 
    var context = canvas.getContext('2d'); 
    var lastX, lastY; 
    context.strokeStyle = #FA8072; 
    context.lineCap = 'round'; 
    context.lineJoin = 'round'; 
    context.lineWidth = 8; 
    context.fill(); 
    // Function to Clear the Canvas 
    function clear() 
    { 
     context.fillStyle = 'blue' 
    context.rect(0, 0, 300, 500); 
    context.fill(); 
    } 
    // Function Dot (to start a new line or just a point) 
     function dot(x,y) 
    { 
    context.beginPath(); 
    context.fillStyle = '#D2691E'; 
    // draw tiny circle 
    context.arc(x,y,1,0, Math.PI*2, true); 
    context.fill(); 
    context.closePath(); 
    } 
    // Handle the Clear button 
    var clearButton = document.getElementById('clear'); 
    // set callback funct. clear()for future touch events 
clearButton.onclick = clear; 
clear(); // do a clear canvas now 
} // end window.onload

來源

2012-07-24 LewSim

你得在這條線一個錯字：

context.strokeStyle = #FA8072;

您需要報價：

context.strokeStyle = '#FA8072';

隨着該固定它似乎工作：http://jsfiddle.net/eMSXU/

（順便說一句，你可能想按在撥弄了「收拾整理」按鈕即可看到您的代碼壽ld've被縮進...）

來源

2012-07-24 00:38:33 nnnnnn

當我按下清除畫布上什麼也沒有發生 – LewSim 2012-07-24 00:46:44

這是因爲在演示中沒有什麼清楚，因爲你有它調用'明確（）'在的'onload'結束的功能。看看這個更新版本：http://jsfiddle.net/eMSXU/1/（不執行'明確（）'onload事件，它會等待您點擊） - 在FF作品反正... – nnnnnn 2012-07-24 00:56:05

清除畫布按鈕/ HTML工作不

回答

相關問題