猿问

html5 canvas画布无法清除?

html5 canvas画布无法清除


慕桂英4014372
浏览 560回答 4
4回答

叮当猫咪

直接使用xm2a123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051<!DOCTYPE&nbsp;html><html&nbsp;lang="en"><head><meta&nbsp;charset="UTF-8"><title>Document</title><style>body{background:&nbsp;#cccccc;}#c1{background:&nbsp;white;}</style><script>window.onload&nbsp;=&nbsp;function(){&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;oC&nbsp;=&nbsp;document.getElementById('c1');&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;oGC&nbsp;=&nbsp;oC.getContext('2d');&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;num&nbsp;=&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;num2&nbsp;=&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;value&nbsp;=&nbsp;1;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setInterval(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;num++;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oGC.save();//保存路径&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oGC.clearRect(0,0,oC.width,oC.height);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oGC.translate(100,100);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(num2&nbsp;==&nbsp;100){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value&nbsp;=&nbsp;-1;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;if(num2&nbsp;==&nbsp;0){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value&nbsp;=&nbsp;1;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;num2&nbsp;+=&nbsp;value;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oGC.scale(num2*1/50,num2*1/50)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oGC.rotate(num*Math.PI/180);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oGC.translate(-50,-50);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oGC.fillRect(0,0,100,100);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oGC.restore();//回复路径&nbsp;&nbsp;&nbsp;&nbsp;},30);};</script></head><body><canvas&nbsp;id="c1"&nbsp;width="600"&nbsp;height="600">&nbsp;</canvas></body></html>save方法&nbsp; 和 restore方法有点像弹栈&nbsp; 也就是先进后出.&nbsp;&nbsp; 这样你就要把oGC.translate&nbsp;作为一个整体,因为translate方法也是被记录在save方法里&nbsp;&nbsp; 我是从形像上来理解 然后移了一下代码

一只甜甜圈

function canvas_getCoordinates(e) 中的e只是函数的参数,没什么特别啊,我改了试了不管是event还是其他的abcd都无关紧要的。至于event代表的是事件,一般因为兼容问题这样写:event = window.event||e;

慕桂英546537

清除方法一、在图片的位置接着画一个矩形覆盖这个图片,并且把颜色设置成和背景色一样就OK了!代码如下:context.fillStyle="ffffff";//白色为例子;context.fillRect(400,100,400,100);注意,上面的代码要放在imageObj.onload里面才有效果;清除方法二、用clearRect()方法,代码如下:context.clearRect(400,100,imageObj.width,100);//清除画布上的指定区域;注意,上面的代码要放在imageObj.onload里面才有效果;

慕森卡

canvas相当于一张图片,css设置的属性相当于对这张图片进行拉伸变化。要改变canvas的大小,应当用这种方式<canvas width=500 height=400></canvas>对应的javascript是canvas=document.getElementsByTagName('canvas')[0];canvas.width=500;canvas.height=400;换句话说,你现在画出的1px的线条实际显示的是在默认大小上经过拉伸变换的样子。
随时随地看视频慕课网APP

相关分类

CSS3
Html5
我要回答