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

cuansuunai832

cuansuunai832

2016-02-19 11:21

今天图老师小编给大家精心推荐个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影响了。

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

示例代码:

代码如下:

[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.

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

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

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

html5 Canvas绘制线条 closePath()实例代码

Web开发
html5 Canvas绘制线条 closePath()实例代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

HTML5 canvas 基本语法

Web开发
HTML5 canvas 基本语法

HTML5 Canvas概述

Web开发
HTML5 Canvas概述

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

HTML5 Canvas——用路径描画线条实例介绍

Web开发
HTML5 Canvas——用路径描画线条实例介绍

HTML5 Canvas 起步(2) - 路径

Web开发
HTML5 Canvas 起步(2) - 路径

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

提高U盘写入速度的技巧

提高U盘写入速度的技巧

多图幻灯Wipe擦洗效果

多图幻灯Wipe擦洗效果
下拉加载更多内容 ↓