Ясная кнопка холста в Javascript/HTML не работает

Таким образом, мой код отображает html-страницу с некоторым текстом на ней, а затем ниже, что у меня есть кнопка «Clear Canvas», которую я хотел бы очистить холст после того, как он был нажат, а затем способный опираться на этот пустой холст. Моя ясная кнопка canvas не работает, она ничего не делает после нажатия. Я использую обратный вызов, чтобы выполнить очистку canvas, а файл html связан с файлом javascript, который затем рисует на новом очищенном холсте. Первый код здесь - это .html-файл с очищаемым холстом, к которому также присоединен файл .js.Ясная кнопка холста в Javascript/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/

(Кстати, вам может потребоваться нажать кнопку «Tidy Up» на скрипке, чтобы увидеть, как ваш код ld've с отступом ...)

источник

2012-07-24 00:38:33 nnnnnn

Когда я нажимаю Clear canvas, ничего не происходит – LewSim

Это потому, что в демо ничего не видно, потому что вы вызывали функцию 'clear()' в конце 'onload'. Посмотрите на эту обновленную версию: http://jsfiddle.net/eMSXU/1/ (которая не запускает 'clear()' onload, она ждет вас щелкнуть) - все равно работает в FF ... – nnnnnn

Ясная кнопка холста в Javascript/HTML не работает

ответ

Смежные вопросы