这篇文章主要介绍了 javascript+html5 实现绘制圆环的方法, 实例分析了 javascript 实现 html5 基于 canvas 绘制圆环的相关技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 javascript+html5 实现绘制圆环的方法。分享给大家供大家参考。具体如下:
- <!DOCTYPE html>
- <html>
- <head>
- <title>
- </title>
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
- </head>
- <body>
- <fieldset>
- <canvas id="myCanvas" width="400px" height="400px">
- Your browser does not support the HTML5 canvas tag.
- </canvas>
- </fieldset>
- <script type="text/javascript">
- function yuanhuan(ctx, data, option) {
- var cood = option.cood;
- var radius = option.radius;
- var lastpos = pos = 0;
- for (var i = 0; i < data.length; i++) {
- ctx.beginPath();
- ctx.moveTo(cood.x, cood.y);
- ctx.fillStyle = data[i].bgcolor;
- pos = lastpos + Math.PI * 2 * data[i].value / 100;
- ctx.arc(cood.x, cood.y, radius, lastpos, pos, false);
- ctx.fill();
- lastpos = pos;
- }
- ctx.beginPath();
- ctx.fillStyle = "white";
- radius *= 0.5;
- ctx.arc(cood.x, cood.y, radius, 0, Math.PI * 2, false);
- ctx.fill();
- }
- var data = [{
- bgcolor: 'yellowgreen',
- value: 30
- },
- {
- bgcolor: 'green',
- value: 30
- },
- {
- bgcolor: 'yellow',
- value: 40
- }];
- var canvas = document.getElementById("myCanvas");
- var ctx = canvas.getContext("2d");
- yuanhuan(ctx, data, {
- cood: {
- x: 200,
- y: 200
- },
- radius: 150
- })
- </script>
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: