html5 canvas画布无法清除？

4回答

叮当猫咪

直接使用xm2a123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051<!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方法里   我是从形像上来理解然后移了一下代码

0 0

一只甜甜圈

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

0 0

慕桂英546537

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

0 0

慕森卡

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

0 0