首页 > web前端 > html/css/css3 > html5 canvas绘图之context.beginPath,context.closePath路径实例
网站建设、切图、企业建站、微信开发 联系QQ:404658186 tel:18716186715
2015
06-15

html5 canvas绘图之context.beginPath,context.closePath路径实例

画圆并不单单是直接用arc,它还用到beginPath()方法,和closePath()方法,如果没有重新beginPath那么前面的路劲会保留。

  • 系统默认在绘制第一个路径的开始点为beginPath。
  • 如果画完前面的路径没有重新指定beginPath,那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制。
  • 每次调用context.fill()的时候会自动把当次绘制的路径的开始点和结束点相连,接着填充封闭的部分。

关于context.beginPath(),context.closePath()有趣的例子

function draw23(id) {
            var canvas = document.getElementById(id);
            if (canvas == null) {
                return false;
            }
            var context = canvas.getContext('2d');
            var n = 0;
           
            //左侧1/4圆弧
            context.beginPath();
            context.arc(100, 150, 50, 0, Math.PI/2 , false);
            context.fillStyle = 'rgba(255,0,0,0.25)';
            context.fill();
            context.strokeStyle = 'rgba(255,0,0,0.25)'
            context.closePath();
            context.stroke();

            //右侧1/4圆弧
            context.beginPath();
            context.arc(300, 150, 50, 0, Math.PI/2 , false);
            context.fillStyle = 'rgba(255,0,0,0.25)';
            context.fill();
            context.strokeStyle = 'rgba(255,0,0,0.25)';
            context.closePath();
            context.stroke();
        }

html5 canvas绘图标签 详细使用教程 - 第6张  | 码农小兵

进入html5 canvas绘图详细教程

最后编辑:
作者:码农一号
这个作者貌似有点懒,什么都没有留下。
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

留下一个回复

你的email不会被公开。

*