html5 canvas里怎么绘制椭圆并保持线条粗细均匀

本文主要介绍"html5 canvas里如何绘制椭圆并保持线条粗细均匀"，希望能够解决您遇到有关问题，下面我们一起来看这篇 "html5 canvas里如何绘制椭圆并保持线条粗细均匀" 文章。

代码如下:

<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 canvas里如何绘制椭圆并保持线条粗细均匀" 就介绍到这。希望大家多多支持编程宝库。

怎么检测浏览器是否支持html5视频：本文主要介绍"如何检测浏览器是否支持html5视频"，希望能够解决您遇到有关问题，下面我们一起来看这篇 "如何检测浏览器是否支持html5视频" 文章。运行效果：1.在EditPlus中运行2.在chr ...