js中的canvas画图，clearrect清除画布之后，重绘页面空白，重绘不出来，但没报错，js方法正常执行。

Posted 2023-05-09

参考技术A <canvas id="myCanvas">your browser does not support the canvas tag </canvas>
<button onclick="a();">画</button><button onclick="b();">清除</button>
<script type="text/javascript">
function a()
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);

function b()
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.clearRect(0,0,80,100);

</script>
**************************************
清除正常没问题，重绘正常追问

要不我把文件发你，帮我看下吧～

追答

可以

本回答被提问者和网友采纳 参考技术B 加个定时器就ok，我刚解决

JS canvas画图

1. 获取canvas对象的画笔。

　　document.getElementById(" ID名 ").getContext(‘ 2d ‘);

2. 设置画笔属性。

　　.lineWidth = 5;   设置划线宽度为5像素。

　　.strokeStyle = "rgb(250,255,20);    设置画线颜色。

　　.fillStyle = "red"    设置填充颜色。

3. 画矩形

　　.strokeRect(x, y, w, h);     画矩形框

　　.fillRect(x, y, w, h);            画矩形面

4. 路径画图。

　　.beginPath()                 开始路径定义

　　.closePath()                 闭合路径（使首尾相连）

　　.fill()                              填充

　　.stroke()                       划线

 

　　.moveTo(x, y)              移动画笔到（x,  y）

　　lineTo(x, y)                  从当前位置划线至（x, y）

　　arc(x, y, r, s, e, b)        画弧（xy坐标，r半径， s e开始与结束角度， b 划线方向 true为逆时针）

5. 清除画面内容。

　　.clearRect(x,y,w,h)      擦除矩形中的内容