html5 canvas画布无法清除
4 回答
叮当猫咪
TA贡献1776条经验 获得超12个赞
直接使用xm2a
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ background: #cccccc; } #c1{ background: white; } </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); var num = 0; var num2 = 0; var value = 1;
setInterval(function(){
num++;
oGC.save();//保存路径 oGC.clearRect(0,0,oC.width,oC.height); oGC.translate(100,100); if(num2 == 100){ value = -1; } else if(num2 == 0){ value = 1; } num2 += value; oGC.scale(num2*1/50,num2*1/50) oGC.rotate(num*Math.PI/180); oGC.translate(-50,-50); oGC.fillRect(0,0,100,100); oGC.restore();//回复路径 },30); }; </script> </head> <body> <canvas id="c1" width="600" height="600">
</canvas> </body> </html> |
save方法 和 restore方法有点像弹栈 也就是先进后出. 这样你就要把oGC.translate 作为一个整体,因为translate方法也是被记录在save方法里 我是从形像上来理解 然后移了一下代码
一只甜甜圈
TA贡献1836条经验 获得超5个赞
function canvas_getCoordinates(e) 中的e只是函数的参数，没什么特别啊，我改了试了不管是event还是其他的abcd都无关紧要的。
至于event代表的是事件，一般因为兼容问题这样写：event = window.event||e;
慕桂英546537
TA贡献1848条经验 获得超10个赞
清除方法一、
在图片的位置接着画一个矩形覆盖这个图片，并且把颜色设置成和背景色一样就OK了！
代码如下：
context.fillStyle="ffffff";//白色为例子；
context.fillRect(400,100,400,100);
注意，上面的代码要放在imageObj.onload里面才有效果；
清除方法二、
用clearRect()方法，代码如下：
context.clearRect(400,100,imageObj.width,100);//清除画布上的指定区域；
注意，上面的代码要放在imageObj.onload里面才有效果；
慕森卡
TA贡献1806条经验 获得超8个赞
canvas相当于一张图片，css设置的属性相当于对这张图片进行拉伸变化。要改变canvas的大小，应当用这种方式
<canvas width=500 height=400></canvas>
对应的javascript是
canvas=document.getElementsByTagName('canvas')[0];
canvas.width=500;
canvas.height=400;
换句话说，你现在画出的1px的线条实际显示的是在默认大小上经过拉伸变换的样子。
- 4 回答
- 0 关注
- 545 浏览
添加回答
举报
0/150
提交
取消