清除画布按钮/ 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工作不

回答

相关问题