使用路径arc-奥运五环-白红宇

使用路径arc-奥运五环

阅读量：5158 次

发布时间：2019-06-13

本文共 1635 字，大约阅读时间需要 5 分钟。

<!DOCTYPE html>

<head>

</head>

<body>

/*arc(x, y, radius, startAngle, endAngle, counterclockwise)

参数描述

x, y 描述弧的圆形的圆心的坐标。

radius 描述弧的圆形的半径。

startAngle, endAngle 沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来衡量。

沿着 X 轴正半轴的三点钟方向的角度为 0，角度沿着逆时针方向而增加。

counterclockwise 弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历。*/

var canvas = document.getElementById("myCanvas");

//返回绘图对象

var ctx = canvas.getContext("2d");

//坐标，圆半径

ctx.lineWidth = 5;

ctx.strokeStyle = "#163B62";

ctx.beginPath();

ctx.arc(70, 70, 40, 0, Math.PI * 2, false);

ctx.stroke();

ctx.strokeStyle = "#000000";

ctx.beginPath();

ctx.arc(160, 70, 40, 0, Math.PI * 2, false);

ctx.stroke();

ctx.strokeStyle = "#BF0628";

ctx.beginPath();

ctx.arc(250, 70, 40, 0, Math.PI * 2, false);

ctx.stroke();

ctx.strokeStyle = "#EBC41F";

ctx.beginPath();

ctx.arc(110, 110, 40, 0, Math.PI * 2, false);

ctx.stroke();

ctx.strokeStyle = "#198E4A";

ctx.beginPath();

ctx.arc(200, 110, 40, 0, Math.PI * 2, false);

ctx.stroke();

//开始调节

ctx.strokeStyle = "#163B62";

ctx.beginPath();

ctx.arc(70, 70, 40, Math.PI * 1, Math.PI * 2.4, false);

ctx.stroke();

ctx.strokeStyle = "#000000";

ctx.beginPath();

ctx.arc(160, 70, 40, Math.PI * 1.6, Math.PI * 2.3, false);

ctx.stroke();

ctx.strokeStyle = "#BF0628";

ctx.beginPath();

ctx.arc(250, 70, 40, Math.PI * 2, Math.PI * 2.9, false);

ctx.stroke();

ctx.strokeStyle = "#000000";

ctx.beginPath();

ctx.arc(160, 70, 40, Math.PI * 2, Math.PI * 2.8, false);

ctx.stroke();

</script>

</body>

</html>

转载于:https://www.cnblogs.com/xiaoleidiv/p/3171610.html

你可能感兴趣的文章

【OpenJ_Bailian - 2287】Tian Ji -- The Horse Racing （贪心）

查看>>

Java网络编程--socket服务器端与客户端讲解

Timer-triggered memory-to-memory DMA transfer demonstrator

64位主机64位oracle下装32位客户端ODAC(NFPACS版)

Spring Mvc模式下Jquery Ajax 与后台交互操作

查看>>

(转)matlab练习程序（HOG方向梯度直方图）

查看>>

『Raid 平面最近点对』

查看>>

【ADO.NET基础-数据加密】第一篇（加密解密篇）

查看>>

C语言基础小结（一）

查看>>

STL中的优先级队列priority_queue