本文主要是介绍canvas画奥运五环，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head><title>奥运五环</title><meta charset="utf-8">
</head>
<body><canvas id="canvas" width="800" height="800"></canvas>
</body>
<script>var canvas = document.querySelector('#canvas'),context = canvas.getContext('2d');var radius = 100;context.lineWidth = 25;function draw(x, y, startAngle, endAngle, color) {context.beginPath();context.strokeStyle = color;context.moveTo(x + radius * Math.cos(startAngle), y + radius * Math.sin(startAngle));context.arc(x, y, radius, startAngle, endAngle, false);context.stroke();context.closePath();}draw(275, 360, 1.2 * Math.PI, 1.5 * Math.PI, '#fda811');draw(160, 250, 0, 2 * Math.PI, '#3b7cb6');draw(275, 360, -0.2 * Math.PI, 1.2 * Math.PI, '#fda811');draw(525, 360, 1.2 * Math.PI, 1.5 * Math.PI, '#2d9b2b');draw(400, 250, 0, 2 * Math.PI, '#150f11');draw(640, 250, 0.8 * Math.PI, 2 * Math.PI, '#fc0203');draw(275, 360, 1.5 * Math.PI, 1.8 * Math.PI, '#fda811');draw(525, 360, -0.5 * Math.PI, 1.2 * Math.PI, '#2d9b2b');draw(640, 250, 0, 0.8 * Math.PI, '#fc0203');
</script>
</html>
这篇关于canvas画奥运五环的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
