清除Javascript/HTML中的画布按钮不工作
因此,我的代码显示了一个html页面,上面有一些文本,下面有一个“clear Canvas”(清除画布)按钮,我希望在按下该按钮后清除画布,然后能够在这个空白画布上绘制。我的clear canvas按钮不起作用,一按它就什么也做不了。我使用回调来执行画布清理,html文件连接到javascript文件,然后javascript文件在新清理的画布上绘制东西。这里的第一个代码是带画布的.html文件,该画布正在被清除,该画布还连接了.js文件 我试过context.Rect(x,y,w,h); 和canvas.width.canvas.width; 这两种方法似乎都不管用。我用的是铬清除Javascript/HTML中的画布按钮不工作,javascript,html,canvas,callback,Javascript,Html,Canvas,Callback,因此,我的代码显示了一个html页面,上面有一些文本,下面有一个“clear Canvas”(清除画布)按钮,我希望在按下该按钮后清除画布,然后能够在这个空白画布上绘制。我的clear canvas按钮不起作用,一按它就什么也做不了。我使用回调来执行画布清理,html文件连接到javascript文件,然后javascript文件在新清理的画布上绘制东西。这里的第一个代码是带画布的.html文件,该画布正在被清除,该画布还连接了.js文件 我试过context.Rect(x,y,w,h); 和c
<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
var canvas=document.getElementById(“主”);
var context=canvas.getContext('2d');
context.fillStyle=“#008000”;
context.rect(0,0300);
context.fill();
正文{填充:10px;边距:0px;背景色:#FF9;}
#主{页边距:10px自动0px自动;}
清除画布
//html文件的结尾
//JavaScript文档
//等待窗口完全加载到浏览器中
window.onload=函数()
{
//所以智能手机在触摸时不会移动/调整图像大小
document.ontouchmove=函数(e)
{
e、 预防默认值();
}
var canvas=document.getElementById('main');
//画布上方“清除”按钮使用的像素数
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();
//函数以清除画布
函数clear()
{
context.fillStyle='blue'
rect(0,0300500);
context.fill();
}
//功能点(开始一条新线或一个点)
函数点(x,y)
{
context.beginPath();
context.fillStyle='#D2691E';
//画小圆
弧(x,y,1,0,Math.PI*2,true);
context.fill();
closePath();
}
//处理清除按钮
var clearButton=document.getElementById('clear');
//为将来的触摸事件设置回调funct.clear()
clearButton.onclick=清除;
clear();//现在就清除画布
}//end window.onload
您在这行有一个输入错误:
context.strokeStyle = #FA8072;
您需要报价:
context.strokeStyle = '#FA8072';
有了这一点,它似乎起了作用:
(顺便说一句,你可能想按小提琴上的“整理”按钮,看看你的代码应该如何缩进……当我按Clear canvas时,什么都没有发生,这是因为在演示中没有什么需要清除的,因为你让它在
onload
的末尾调用Clear()
函数。看看这个更新版本:(它不运行clear()
onload,它等待您单击)-无论如何都可以在FF中工作。。。