怎么样才能让canvas可以擦除一个圆形

擦除canvas画布有两个方法可以使用：

clearRect方法

重新设置高宽度</ol>示例：<pre t="code" l="js">/ 本示例使用jQuery描述 /

var canvas = $('#myCanvas'); //选择要擦除的canvas元素

var context = canvasget(0)getContext('2d'); //获取canvas上下文

//第一种方法擦除（clearRect方法）

contextclearRect(0, 0, canvaswidth(), canvasheight());

//第二种方法擦除（重新设置高宽度）

canvasattr('width', canvaswidth());

canvasattr('height', canvasheight());

请在绘制每条线条前，用beginPath()重置路径，这样每条线条的样式就可以单独设置了：

var cv = documentgetElementById('canvas');

var g = cvgetContext('2d');

//绘制线条1

gbeginPath(); //看这行

glineWidth=5;

gmoveTo(x1,y1);

glineTo(x2,y2);

gstroke();

//绘制线条2

gbeginPath();  //还有这行

glineWidth=10;

gmoveTo(x3,y3);

glineTo(x4,y5);

gstroke();

网页分几种方式实现动画

1、CSS动画，由浏览器渲染，可控性最差，速度非常快（如果浏览器打开了硬件加速）

2、Canvas 2D动画，使用JS支持，所以速度稍慢

3、Canvas WebGL动画，使用JS支持，但使用OpenGL渲染，速度和第一个不相上下（其实应该会更快），但相当复杂。

至于直接控制DOM元素还是省省吧，太慢了。。。

不知道你要的效果是怎么样的，（1）如果仅清除这一条线，可以用clearRect（）方法，类似橡皮擦。（2）如果想不影响其他的画布，可以设置分层的canvas （3）保存原先的画，擦除部分，重画

canvas画布保存为：

function convertCanvasToImage(canvas) {

  var image = new Image();

  imagesrc = canvastoDataURL("image/png");

  return image;

canvas参数为你的canvas对象，返回一个对象，你可以将这个image放到网页结构中，如果要保存图像，可以将canvastoDataURL("image/png")返回的base64格式的数据放到input（type=hidden）中，用户点击上传按钮（或设置表单自动提交），将base64格式的数据上传

形如：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABbSURBVDhPY8AFMvJL/oMwlEs8yMgvJVcjyMbSYaERogCC0/OAGIkPwaVQMUhgQWiggWANIAzUhKoBpgjdMIhBUHsxAdxkUgHMBiiXeDAQNkICAsolHuC3kYEBAG/wdxC2W2tUAAAAAElFTkSuQmCC

服务器端接收到字符串（以上字符串可以直接在浏览器中打开，IE低版本就算了，能用canvas的浏览器都可以）后根据data:image/png得知应该保存的文件类型扩展名（png），然后将base64,后面的base64编码字符串解码(后端语言实现，如PHP用base64_decode()函数)，将解码后的二进制数据以二进制的形式保存到服务器上（形式）

如果存数据库，可以直接存base64编码，读取时候解码也行，建议以文件形式存储，数据库不适合存大文件