• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
Kevin300 显示全部楼层 发表于 2021-10-25 19:44:36 |阅读模式 打印 上一主题 下一主题
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影响了。要修正这个题目,就要一点点小本事了。
示例代码:

复制代码代码如下:
  1. <br /><canvas width="400" height="300"></canvas>  <br /><script>  <br />var ctx = documentquerySelector('canvas')getContext('2d');  <br />ctxlineWidth = "10";  <br />ctxsave();  <br />ctxscale(1,2);  <br />ctxarc(150,150,100,0,MathPI*2,false);  <br />ctxrestore();  <br />ctxstroke();  <br /></script>  <br /><br />
复制代码

如今匀称了,非常完善。本事就在先save生存画布状态,然后缩放、调用路径指令,再restore恢复画布状态,再stroke绘制出来。
关键点是先save后缩放,先restore后stroke.

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作