• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    html5 canvas里绘制椭圆并保持线条粗细均匀的技巧

    Canvas里绘制椭圆是一个很常见的需求,比较新的HTML Canvas 2D Context W3C草案里面新增了ellipse方法绘制椭圆,但是目前大多数浏览器还没有实现该方法,所以需要用arc或者arcTo方法结合scale变形来绘制椭圆。

    示例代码:

    复制代码
    代码如下:

    <canvas width="400" height="300"></canvas>
    <script>
    var ctx = documentquerySelector('canvas')getContext('2d');
    ctxlineWidth = "10";
    ctxscale(1,2);
    ctxarc(150,150,100,0,MathPI*2,false);
    ctxstroke();
    </script>


    有点不对,因为线条粗细不均匀了,stroke也被scale影响了。

    要修正这个问题,就要一点点小技巧了。

    示例代码:

    复制代码
    代码如下:

    [code]
    <canvas width="400" height="300"></canvas>
    <script>
    var ctx = documentquerySelector('canvas')getContext('2d');
    ctxlineWidth = "10";
    ctxsave();
    ctxscale(1,2);
    ctxarc(150,150,100,0,MathPI*2,false);
    ctxrestore();
    ctxstroke();
    </script>

    [/code]


    现在均匀了,非常完美。

    技巧就在先save保存画布状态,然后缩放、调用路径指令,再restore恢复画布状态,再stroke绘制出来。

    关键点是先save后缩放,先restore后stroke.

    上一篇:html5如何及时更新缓存文件(js、css或图片)
    下一篇:检测浏览器是否支持html5视频的代码
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

    html5 canvas里绘制椭圆并保持线条粗细均匀的技巧 html5,canvas,里,绘制,椭圆,