使用canvas和JavaScript画一个阴阳图

最新推荐文章于 2024-06-10 21:57:03 发布
最新推荐文章于 2024-06-10 21:57:03 发布
阅读量160 收藏
点赞数
分类专栏： J2EE 文章标签： javascript canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45775524/article/details/109144384
版权

题目描述
主要函数：

函数名用法说明
arc()Canvas.arc(0,0,20,0,2*Math.PI,false);arc参数：坐标点，半径，起始角度，结束角度，逆时针（默认）。画圆
stroke()Canvas.stroke();画边框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<canvas id="myCanvas" width="1000" height="1000">
</canvas>
	<script type="text/javascript">
		var c = document.getElementById("myCanvas");
		var CanContenxt = c.getContext("2d");
		//绘制右边的黑线轮廓和白色半圆
		CanContenxt.fillStyle = "#FFFFFF";
		CanContenxt.beginPath();
		CanContenxt.arc(300, 200, 150, 0, 2 * Math.PI, false);
		CanContenxt.closePath();
		CanContenxt.stroke();
		//绘制左侧的黑色半圆
		CanContenxt.fillStyle = "#000000";
		CanContenxt.beginPath();
		CanContenxt.arc(300, 200, 150, Math.PI / 2, 1.5 * Math.PI, false);
		CanContenxt.closePath();
		CanContenxt.fill();
		//绘制上半部分的黑色小圆
		CanContenxt.fillStyle = "#000000";
		CanContenxt.beginPath();
		CanContenxt.arc(300, 125, 75, 0, 2 * Math.PI, false);
		CanContenxt.closePath();
		CanContenxt.fill();
		//绘制下半部分的白色小圆
		CanContenxt.fillStyle = "#FFFFFF";
		CanContenxt.beginPath();
		CanContenxt.arc(300, 275, 75, 0, 2 * Math.PI, false);
		CanContenxt.closePath();
		CanContenxt.fill();
		//绘制两个最小的小圆
		//绘制黑色小圆
		CanContenxt.fillStyle = "#000000";
		CanContenxt.beginPath();
		CanContenxt.arc(300, 275, 17, 0, 2 * Math.PI, false);
		CanContenxt.closePath();
		CanContenxt.fill();
		//绘制白色小圆
		CanContenxt.fillStyle = "#FFFFFF";
		CanContenxt.beginPath();
		CanContenxt.arc(300, 125, 17, 0, 2 * Math.PI, false);
		CanContenxt.closePath();
		CanContenxt.fill();
	</script>  
</body>

</html>
Tiya_s
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript画简单图形
07-22
早上无聊参照算法写了一个JS脚本的画图形的程序
又一个牛B函数：阴阳图极坐标函数
matrix67的专栏
04-02 1263
    刚才在网上发现了上面这张猛图。急着想验证一下，但不知道Mathematica如何画极坐标的隐函数，于是写了一个Free Pascal的小程序。大家也可以试着把这个小程序粘贴到Free Pascal里运行一下看看。{$ASSERTIONS+}uses graph,math; function f(t,r:extended):extended;begin   e
C语言编写简单图像程序-太极阴阳图
qianxuedegushi的博客
01-16 1万+
#include #include #include #include typedef struct {                 size_t width;                 size_t height;                 unsigned char *data; } Image; static Image *image
【Canvas】js用Canvas绘制阴阳太极图动画效果
TA远方
11-27 894
学习JavaScript是否兴趣缺缺，那就需要来一个兴趣学习，问一下有没有兴趣用Canvas画图呢，可以画很多有趣的事物，自由发挥想象，收获多多哦，这里有一个例子，如何用canvas画阴阳太极图动图效果，接下来开始讲，边学边做。
太极图python自定义函数绘制_Python turtle绘制阴阳太极图代码解析
weixin_39583751的博客
11-23 390
本文详细分析如何使用Python turtle绘制阴阳太极图，先来分解这个图形，图片中有四种颜色，每条曲线上的箭头表示乌龟移动的方向，首先从中心画一个半圆（红线），以红线所示圆的直径作半径画一个校园，半径为红线所示圆半径的0.15倍（蓝线），之所以选择0.15倍，是因为这样嵌入红圆内的小圆直径和红圆直径接近黄金分割。代码导入turtle库import turtle创建画布window = turt...
一个使用HTML5 Canvas和JavaScript创建的春节烟花特效动画
02-06
这是一个使用HTML5 Canvas和JavaScript创建的春节烟花特效动画。该动画会在页面加载时自动触发烟花效果，并且还可以通过点击画布来手动触发更多的烟花。烟花的颜色、速度和大小都是随机生成的，使得每次烟花的效果...
Javascript HTML5 Canvas实现的一个画板
10-22
主要介绍了Javascript HTML5 Canvas实现的一个画板的相关资料,需要的朋友可以参考下
用html5的canvas和JavaScript创建一个绘图程序的简单实例
09-27
下面小编就为大家带来一篇用html5的canvas和JavaScript创建一个绘图程序的简单实例。小编觉得挺不错的， 现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
javascript Canvas图形绘制各类图形动画等示例
02-21
javascript Canvas图形绘制各类图形动画等示例
JavaScript html5 canvas画布中删除一个块区域的方法
10-22
主要介绍了JavaScript html5 canvas画布中删除一个块区域的方法,涉及JavaScript结合html5操作canvas画布图形绘制的技巧,需要的朋友可以参考下
atramentjs一个轻量级JS库使用户能够在HTML画布上绘制平滑自然的图画和手写功能
08-08
atrament.js一个轻量级JS库，使用户能够在HTML画布上绘制平滑，自然的图画和手写功能
HTML5 Canvas 绘制太极图
weixin_33691700的博客
09-03 365
代码： &lt;!DOCTYPE html&gt; &lt;html lang="utf-8"&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; &lt;head&gt; &lt;title&gt;太极图&lt;/title&a
canvas 圆角矩形填充_View绘制系列(9)Canvas八卦图绘制
weixin_32949451的博客
12-29 133
Canvas八卦图绘制前面我们已经学习了Path.quadTo(float x1, float y1, float x2, float y2)及Path.cubicTo(float x1, float y1, float x2, float y2,float x3, float y3)方法的使用，但并不是所有的曲线所有的曲线都需要用贝塞尔曲线来描述，毕竟在没有专业软件辅助的情况下，确认控...
用canvas画阴阳鱼
渔父歌的博客
11-18 1234
canvas画动态图像
Android中Canvas绘图基础详解（附源码下载）
热门推荐
孙群
11-11 4万+
Android中，如果我们想绘制复杂的自定义View或游戏，我们就需要熟悉绘图API。Android通过Canvas类暴露了很多drawXXX方法，我们可以通过这些方法绘制各种各样的图形。Canvas绘图有三个基本要素：Canvas、绘图坐标系以及Paint。Canvas是画布，我们通过Canvas的各种drawXXX方法将图形绘制到Canvas上面，在drawXXX方法中我们需要传入要绘制的图形的
使用three.js画的简单的墙壁 在墙上挖了个门，做纪念
dragonrxl的专栏
07-02 1万+
项目要用到web3d 但是webgl学习起来太麻烦，先用three.js库写这点，初期做个记录。    关于框架的基本搭建和js引入，场景相机等的基本添加就不说明了，随便搜一下就一堆说明，重点说下如何在墙壁上挖一个门出来。    首先使用了ThreeBSP.js的类库   然后是主要代码: var sphere1BSP = new ThreeBSP(cube);
javascript画图
Tomson Xu
03-31 1271
Raphael http://raphaeljs.com/ http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/ http://czpae86.iteye.com/blog/818953 http://czpae86.iteye.com
Android用Canvas画一个折线图，并加以简单封装
计蒙不吃鱼的博客
05-21 4627
昨天晚上跟朋友聊天，聊到绘制折线，然后多画了几笔，画了个折线图。（老规矩后面有源码） 先看一下效果图 view宽高设置为正方形 view宽高设置为mach_parent 先来绘制一个固定的折线图 1.先画一个xy坐标轴。 Paint daxesPaint,axispointPaint,brokenLinePaint; //画布宽度
JS中一个dom元素能绑定多少事件
最新发布
ggq53219的博客
06-10 536
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
用javascript画一个雷达图
09-04
你可以使用 JavaScript 和 canvas 来画一个雷达图。 这里是一个简单的例子： ``` <canvas id="radar-chart"></canvas> const ctx = document.getElementById('radar-chart').getContext('2d'); const data = {...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值