如何在canvas中画出一个太极图

最新推荐文章于 2020-09-12 23:08:00 发布
最新推荐文章于 2020-09-12 23:08:00 发布
阅读量172 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/qsdf/p/10111327.html
版权

先放一个效果图：

 

代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <canvas width="600px" height="600px" id="canvas"></canvas>
        <script type="text/javascript">
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            
            ctx.arc(300,300,100,0,2*Math.PI)
            ctx.stroke();
            
            ctx.beginPath();
            ctx.arc(300,300,100,0.5*Math.PI,1.5*Math.PI)
            ctx.fill();
            
            ctx.beginPath();
            ctx.arc(300,250,50,0.5*Math.PI,1.5*Math.PI);
            ctx.fillStyle = "white";
            ctx.fill();
            
            ctx.beginPath();
            ctx.arc(300,350,50,1.5*Math.PI,0.5*Math.PI);
            ctx.fillStyle = "black";
            ctx.fill();
            
            ctx.beginPath();
            ctx.arc(300,250,25,0,2*Math.PI);
            ctx.fillStyle = "black";
            ctx.fill();
            
            ctx.beginPath();
            ctx.arc(300,350,25,0,2*Math.PI);
            ctx.fillStyle = "white";
            ctx.fill();
        </script>
    </body>
</html>

具体来说，先画出一个圆

 ctx.arc(300,300,100,0,2*Math.PI)
            ctx.stroke();

然后在圆的左半边填充黑色

ctx.beginPath();
            ctx.arc(300,300,100,0.5*Math.PI,1.5*Math.PI)
            ctx.fill();

然后在圆心纵坐标上下各二分之一半径处分别画一个圆，一个填充黑色，一个填充白色

            ctx.beginPath();
            ctx.arc(300,250,50,0.5*Math.PI,1.5*Math.PI);
            ctx.fillStyle = "white";
            ctx.fill();
            
            ctx.beginPath();
            ctx.arc(300,350,50,1.5*Math.PI,0.5*Math.PI);
            ctx.fillStyle = "black";
            ctx.fill();

最后在这两个圆内分别填充一个更小的圆，一个黑色，一个白色

ctx.beginPath();
            ctx.arc(300,250,25,0,2*Math.PI);
            ctx.fillStyle = "black";
            ctx.fill();
            
            ctx.beginPath();
            ctx.arc(300,350,25,0,2*Math.PI);
            ctx.fillStyle = "white";
            ctx.fill();

 

转载于:https://www.cnblogs.com/qsdf/p/10111327.html

weixin_30929195
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于canvas画一个太极图
04-29
基于canvas画一个太极图
canvas绘制太极图
puriXue的博客
04-27 1618
css样式代码 .animation{ width: 800px; height: 800px; border: 1px solid #000; } #canvas{ animation: rotate 6s linear infinite; } /* 给太极图设置旋转动画 */ @keyframes rotate{ 0%{ transform: none; }...
HTML5 Canvas组件绘制太极图案
web开发
02-03 278
一实现思路： 实现原理主要是利用HTML5的Canvas组件提供的path函数功能来绘制圆，首先绘 制两个半圆，分别为黑色和白色，组成一个圆，绘制完成以后再分别绘制一个黑色 和白色的圆在绘制好的黑白圆之内，半径恰好是黑白大圆一半。 最后在绘制好的两 个黑白小圆内分别填充白色和黑色的点，半径大小为10pixel左右。 二程序效果如下： ...
JS用Canvas绘制太极图.
11-15
1.本项目是基于Dcloud的有一个移动APP项目 2.html5页面同时支持浏览器中访问 (绘制太极界面可以直接在浏览器中运行)
canvas制作动态太极图
H&B Blog
08-06 1412
用 canvas 画布绘制出一个会旋转的太极图 方法一： 运用css动画来实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态版太极图</title> <style> *{ margin: 0; ...
Android 画一个太极图实例代码
09-01
以上步骤完成后，一个简单的太极图就在Android应用中绘制出来了。当然，你还可以根据需求添加更多的细节，比如渐变色、动态效果等，让太极图更加生动和真实。总的来说，通过理解Android的Canvas和Path类，我们可以...
HTML5 Canvas旋转动画的2个代码例子（一个旋转的太极图效果）
12-14
效果图： 方法一： 复制代码代码如下:<!DOCTYPE HTML> <html> <body> <canvas id=”myCanvas” width=”500″ height=”500″>your browser does not support the canvas tag</canvas> ...
canvas绘制太极图的实现示例
01-21
看到了很多人写的太极图案，自己也来搞一下，今天就来.../* 给太极图设置旋转动画 */ @keyframes rotate{ 0%{ transform: none; } 100%{ transform: rotate(360deg); } } javascript代码 //文档加载完毕后执行
使用canvas画太极图
weixin_30596735的博客
07-29 160
定义和用法 arc() 方法创建弧/曲线（用于创建圆或部分圆）。 提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。 提示：请使用 stroke或 fill方法在画布上绘制实际的弧。 JavaScript 语法： context.arc(x,y,r,sAngle,eAngle,counterclockwise); 参...
利用canvas绘制太极图
weixin_44286392的博客
07-17 531
先看效果图 知识点 1.html的<canvas>标签: 该标签通过脚本（通常是JavaScript）来绘制图形，它只是图形容器，必须使用脚本绘制图形。 关于HTML画布的一些方法：https://www.runoob.com/tags/ref-canvas.html 2.HTML DOM getContext()方法： 在该案例中，var cxt=c.getContext("2d");参数"2d"指定了在画布上绘制的类型，即二维绘图。（当前唯一合法值是"2d"） 返回值cxt是一个Canva.
用canvas画太极图（一步步详解附带源代码）
phpyasi520的博客
09-12 628
canvas绘图 该元素负责在页面中设定一个区域，然后由js动态地在这个区域中绘制图形。这个技术最早是由美国苹果公司推出的，目的是为了取代flash，很快主流浏览器都支持它。 绘制路径 要绘制路径首先必须调用beginPath()方法，如果想绘制一条连接到起点的线条则调用closePath()方法；如果路径已完成，你想用fillStyle填充它，可以调用fill()方法。另外还可以调用stroke()方法对路径描边，使用strokeStyle。 按照上图，就能画出圆，半圆，，...
使用canvas绘制太极
qq_31800209的博客
09-08 829
太极图 今天学习canvas，哈哈哈，其实我还搞不清楚方向来者，不过太极倒是画出来了，记录一下，方便日后查询 理论：绘制圆形cxt.arc(x,y,r,起点弧度（3点位置），终止弧度，bool(默认是false:顺时针，true:逆时针)) 下图是老师画的解析图，为了方便分析，我贴过来了，其实老师和我画的方法不一样，hhh，再次感叹一下 老师的用法：cxt.arc(600,600,100,Math.PI0.5，Math.PI1.5),是右边半圆。 成图： 代码如下：` //大圆部分 cxt
canvas 画布画太极图和钟表
qq_36801966的博客
07-03 669
画图形&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;绘制图形&lt;/tit
canvas绘制太极代码
weixin_30426065的博客
02-16 83
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas太极</title> <style type="text/css"> canvas{background:#...
用canvas画一个太极图（八卦图）
yanhappiness
03-28 4586
用canvas画一个太极图（八卦图）源码展示链接： yanhappiness.github.io/html/canvas-src.html理解什么是canvascanvas是HTML5新增的标签，用于图形的绘制。通过脚本 (通常是JavaScript)来完成.如何使用canvas也就是说canvas只是定义了一块画布，而真正实现路径,盒、圆、字符以及添加图像的绘制是借助于脚本javascript实
HTML5利用canvas绘制太极图案
zhengzixiang666的博客
02-23 8543
代码如下：     pageEncoding="utf-8"%> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); //绘制左侧的白色半圆直径都是150 cxt.fillStyle="#FFFFFF"; cxt.beginPath(); cxt.arc(300,
使用HTML5 Canvas绘制一个太极，并令其转动
LiuZijian的博客o(^▽^)o
10-09 3344
使用HTML5 Canvas绘制一个太极，并令其转动。
在uniapp中写出一个示例 canvas 画两张图片
最新发布
05-30
好的，以下是一个简单的示例代码，用于在Uniapp中使用Canvas画两张图片： ```html <canvas id="myCanvas" style="width: 100%; height: 400rpx;"></canvas> export default { mounted() { // 获取canvas对象...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值