canvas画圆时遇到问题

canvaslock.prototype.drawCle = function (x, y) {
this.ctx.fillStyle="#0ff";
// this.ctx.beginPath(); 如图我去掉beginPath()后出现了下面的现象，我知道beginPath() 方法开始一条路径，或重置当前的路径。如果不加，内存中会存留以前的路径，导致多次绘画。但多次绘画也是画圆啊，怎末会出现多边形
this.ctx.arc(x, y, this.r, 0, Math.PI * 2, true);
this.ctx.fill();
};

慕粉1902362591 2018-01-09

源自：HTML5 Canvas案例 2-2 画圆函数介绍

收起

3回答

小于飞飞回答被采纳获得+3积分 2018-01-14 14:21:57

你好，粘贴全部代码，是指html\css\js，为了更好测试代码，因为出现问题有能上下关联代码问题。针对你的代码与截图综合考虑，关于beginPath();的理解基本正确，可见beginPath();的重要性，开始一条路径，图形之间如没有该语句，会以“上一次beginPath”之后的所有路径为基础进行绘制，所以出现所有图形都连起来，无论直接绘制，还是用JS绘制，每个形状都要有beginPath()，fill()，以避免出现异常，参考如下：

var canvas=document.getElementById('canvas'), 
ctx=canvas.getContext("2d");
 ctx.fillStyle = "#0ff";
  ctx.beginPath(); 
  ctx.arc(64, 64, 20, 0, 2 * Math.PI); 
  ctx.fill();
  ctx.beginPath(); 
  ctx.arc(150, 64,20 , 0, 2 * Math.PI);
  ctx.fill(); 
  ctx.beginPath(); 
  ctx.arc(235, 64,20 , 0, 2 * Math.PI);
  ctx.fill(); 
  ctx.beginPath(); 
  ctx.arc(64, 150, 20, 0, 2 * Math.PI);
  ctx.fill();

希望帮你解答疑惑，加油！

收起回答

慕粉1902362591 提问者 #1

非常感谢！

2018-01-19 22:51:41

一路电光带火花 2018-01-11 20:58:46

这是全部代码吗？你一下把全部代码粘过来呗，比较好测试。

收起回答

提问者慕粉1902362591 #1

var canvas=document.getElementById('canvas'), ctx=canvas.getContext("2d"); ctx.fillStyle = "#0ff"; ctx.arc(64, 64, 20, 0, 2 * Math.PI); ctx.arc(150, 64,20 , 0, 2 * Math.PI); ctx.arc(235, 64,20 , 0, 2 * Math.PI); ctx.arc(64, 150, 20, 0, 2 * Math.PI); ctx.fill();

2018-01-13 22:47:41

小丸子爱吃菜 2018-01-10 09:57:52

请粘贴你全部的代码，我们需要运行并调试问题。

祝学习愉快！

收起回答

提问者慕粉1902362591 #1

var canvas=document.getElementById('canvas'), ctx=canvas.getContext("2d"); ctx.fillStyle = "#0ff"; ctx.arc(64, 64, 20, 0, 2 * Math.PI); ctx.arc(150, 64,20 , 0, 2 * Math.PI); ctx.arc(235, 64,20 , 0, 2 * Math.PI); ctx.arc(64, 150, 20, 0, 2 * Math.PI); ctx.fill();

2018-01-11 19:55:31