html5 canvas用来绘制弧形的代码实现


本文摘自PHP中文网,作者不言,侵删。

这篇文章给大家分享的内容是关于html5 canvas用来绘制弧形的代码实现,有一定的参考价值,有需要的朋友可以从参考一下,希望对你有所帮助。

1.绘制弧形

1

2

3

4

5

context.arc(

    centerx, centery, radius,//圆点坐标和半径

    startingAngle,endingAngle,//起始弧度,结束弧度

    anticlockwise = false//默认顺时针

)

startingAngle和endingAngle对应的图

eg:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>canvas画弧形</title>

</head>

 

<body>

    <canvas id="canvas">浏览器不支持canvas,请更换浏览器</canvas>

    <script type="text/javascript">

        window.onload = function() {

            var canvas = document.getElementById('canvas');

            canvas.width = 1024;

            canvas.height = 768;

            var context = canvas.getContext('2d');

            // 绘制状态

            context.arc(300, 300, 200, 0, 1.5 * Math.PI);

            context.lineWidth = 5;

            context.strokeStyle = 'blue';

            context.stroke();

        }

    </script>

</body>

 

</html>

运行结果:

2.beginPath()和closePath()不用成对出现。

beginPath()代表重新规划一个路径;

closePath()代表要结束当前的路径,如果当前路径没封闭,会自动封闭当前路径,如果不想要封闭,则使用beginPath()就好了,不用使用closePath()。

closePath()对fill()不起作用。因为fill()也会自动封闭当前路径,然后填充。

相关文章推荐:

html5 video如何实现实时监测当前播放时间(代码)

H5中画布、拖放事件以及音视频的代码实例

以上就是html5 canvas用来绘制弧形的代码实现的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

HTML5实践-使用css制作时间icon的具体详解(图)

HTML5中设置或返回音频/视频是否应该被静音的属性muted

canvas图片跨域会遇到的问题及解决方法总结

HTML5实践-可伸缩的mobile搜索框图文详解

h5缓存-manifest的示例代码分享(图文)

svg是什么

使用html和css的新特性实现响应式布局

HTML5 websql四种基本操作的介绍

HTML5开发中viewport进行屏幕适配

处理HTML5新标签的浏览器兼容版问题

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...