HTML--Canvas弧线

HTML5 canvas arcTo() 方法:

展示图:

在这里插入图片描述

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.beginPath();
ctx.moveTo(20,20);           // 创建开始点
ctx.lineTo(100,20);          // 创建水平线
ctx.arcTo(150,20,150,70,50); // 创建弧
ctx.lineTo(150,120);         // 创建垂直线
ctx.stroke();                // 进行绘制

如何使用:

arcTo() 方法在画布上创建介于两个切线之间的弧/曲线。

参数:

参数描述
x1弧的起点的 x 坐标
y1弧的起点的 y 坐标
x2弧的终点的 x 坐标
y2弧的终点的 y 坐标
r弧的半径

可以使用浏览器:Internet Explorer 9、Firefox、Opera、Chrome 、 Safari


注意事项:请使用 stroke() 方法在画布上绘制确切的弧,Internet Explorer 8 或更早的浏览器不支持 [canvas] 元素。


原网站(想知道更多):
原网站来源于W3school点击进入详情

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值