欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

Html5 canvas里绘制椭圆并保持线条粗细匀称的能力

发布时间:2016-11-29  编辑:杨雨个人博客网站   点击:   

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>

Html5 canvas里绘制椭圆并保持线条粗细平均的手段
有点差池,由于线条粗细不匀称了,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]

Html5 canvas里绘制椭圆并保持线条粗细平均的手段
此刻匀称了,很是美满。

能力就在先save生涯画布状态,然后缩放、挪用路径指令,再restore规复画布状态,再stroke绘制出来。

要害点是先save后缩放,先restore后stroke.

本文地址:http://itbyc.com/web/html5/13815.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1