canvas画奥运五环

落日映苍穹つ 2022-07-15 08:37 123阅读 0赞

效果如下：

![Center][]

代码如下：

<!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>

[Center]: /images/20220715/ee5cbb3510d34ca0b65c18f9c8f72535.png

发表评论取消回复

表情：

评论列表（有 0 条评论，123人围观）

还没有评论，来说两句吧...

相关阅读

相关用python画五环

1 问题利用python程序画一个奥运五环。 2 方法奥林匹克标志中五个环的大小，颜色，间距有固定的比例，规定圆的半径为45，五个圆的起始坐标为（-110，-25），

雨点打透心脏的1/2处/ 2024年02月26日 02:51/ 0 赞/ 24 阅读

相关 Python3 turtle绘制奥运五环代码实例

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIz

﹏ヽ暗。殇╰゛Y/ 2023年10月07日 11:06/ 0 赞/ 13 阅读

相关 Java学习之AWT绘图“奥运五环”

案例代码： import java.awt.; public class Example8_9{ public static vo

川长思鸟来/ 2023年01月18日 06:41/ 0 赞/ 160 阅读

相关 Python实践：奥运五环的两种实现方法

import turtle t = turtle.Pen() for x in range(360): t.forward(x)

- 日理万妓/ 2022年12月19日 11:59/ 0 赞/ 133 阅读

相关 html css 奥运五环,CSS3 奥运五环加载动画

CSS 语言： CSSSCSS 确定 html \{ height: 100%; \} body \{ display: -webkit-box; displ

柔情只为你懂/ 2022年10月07日 08:51/ 0 赞/ 120 阅读

相关 CreateJS奥运五环动画

索契奥运会结束了，今天给大家看一个利用CreateJS实现的奥运五环动画，在线把玩请点[这里][Link 1]，下载收藏请戳[这里][Link 2]。 ![SouthEast

太过爱你忘了你带给我的痛/ 2022年08月25日 08:49/ 0 赞/ 113 阅读

相关 canvas画奥运五环

效果如下： ![Center][] 代码如下： <!DOCTYPE html> <html> <head> <title>奥运五环

落日映苍穹つ/ 2022年07月15日 08:37/ 0 赞/ 124 阅读

相关绘制自适应奥运五环

一、绘制自适应五环 1. 实现结果: 设计出五环的正确颜色和形状，并放置浏览器中间. 2. 设计思路首先我们用5个div块级元素来形成5个环的颜色和形状，并把这

怼烎@/ 2022年05月24日 12:28/ 0 赞/ 127 阅读

相关用css写一个有趣的奥运五环~。

用css实现奥运五环样式，并且于页面居中显示，不随页面滚动条而移动，一直处于居中位置。 html代码部分就一个div里边包含5个div。代码如下： <!DOC

Love The Way You Lie/ 2022年03月30日 15:38/ 0 赞/ 285 阅读

相关用Canvas画圆环百分比进度条

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-eq

浅浅的花香味﹌/ 2021年09月14日 00:14/ 0 赞/ 498 阅读