用canvas画太极图（一步步详解附带源代码）

最新推荐文章于 2021-09-23 19:31:01 发布
最新推荐文章于 2021-09-23 19:31:01 发布
阅读量958 收藏 2
点赞数
分类专栏： 前端基础进阶 文章标签： canvas
原文链接：https://mp.weixin.qq.com/s/zLDabBokX9DhlIu6RRfp2w
版权

canvas绘图

该元素负责在页面中设定一个区域，然后由js动态地在这个区域中绘制图形。这个技术最早是由美国苹果公司推出的，目的是为了取代flash，很快主流浏览器都支持它。

绘制路径

要绘制路径首先必须调用beginPath()方法，如果想绘制一条连接到起点的线条则调用closePath()方法；如果路径已完成，你想用fillStyle填充它，可以调用fill()方法。另外还可以调用stroke()方法对路径描边，使用strokeStyle。


按照上图，就能画出圆，半圆，，四分之一圆等等。

开始画图

1.先给背景一个背景颜色，并设置一块画布。

<body style="background-color: steelblue;">
    <canvas width="1000" height="1000" id="cv"></canvas>
</body>

2.画出一个半圆，背景颜色设为黑色。

<script>
        var c = document.getElementById("cv")
        var cv = c.getContext('2d')
        cv.beginPath()
        cv.arc(500, 500, 150, 0.5 * Math.PI, 1.5 * Math.PI, false)
        cv.fillStyle = "black"
        cv.fill()
    </script>

3.画出另一个半圆，背景颜色设为白色。

<script>
        var c = document.getElementById("cv")
        var cv = c.getContext('2d')
        cv.beginPath()
        cv.arc(500, 500, 150, 0.5 * Math.PI, 1.5 * Math.PI, false)
        cv.fillStyle = "black"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 500, 150, 0.5 * Math.PI, 1.5 * Math.PI, true)
        cv.fillStyle = "white"
        cv.fill()
    </script>

4.画出一个小的白色半圆，盖在黑色上面。

 <script>
        var c = document.getElementById("cv")
        var cv = c.getContext('2d')
        cv.beginPath()
        cv.arc(500, 500, 150, 0.5 * Math.PI, 1.5 * Math.PI, false)
        cv.fillStyle = "black"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 500, 150, 0.5 * Math.PI, 1.5 * Math.PI, true)
        cv.fillStyle = "white"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 425, 75, 0.5 * Math.PI, 1.5 * Math.PI, false)
        cv.fillStyle = "white"
        cv.fill()
    </script>

5.画出一个小的黑色半圆，盖在白色大半圆上。

 <script>
        var c = document.getElementById("cv")
        var cv = c.getContext('2d')
        cv.beginPath()
        cv.arc(500, 500, 150, 0.5 * Math.PI, 1.5 * Math.PI, false)
        cv.fillStyle = "black"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 500, 150, 0.5 * Math.PI, 1.5 * Math.PI, true)
        cv.fillStyle = "white"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 425, 75, 0.5 * Math.PI, 1.5 * Math.PI, false)
        cv.fillStyle = "white"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 575, 75, 0.5 * Math.PI, 1.5 * Math.PI, true)
        cv.fillStyle = "black"
        cv.fill()
    </script>

现在，太极图的样子基本成型。
6.分别画一个黑色小圆和一个白色小圆。

<script>
        var c = document.getElementById("cv")
        var cv = c.getContext('2d')
        cv.beginPath()
        cv.arc(500, 500, 150, 0.5 * Math.PI, 1.5 * Math.PI, false)
        cv.fillStyle = "black"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 500, 150, 0.5 * Math.PI, 1.5 * Math.PI, true)
        cv.fillStyle = "white"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 425, 75, 0.5 * Math.PI, 1.5 * Math.PI, false)
        cv.fillStyle = "white"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 575, 75, 0.5 * Math.PI, 1.5 * Math.PI, true)
        cv.fillStyle = "black"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 425, 20, 0, 2 * Math.PI, false)
        cv.fillStyle = "black"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 575, 20, 0, 2 * Math.PI, false)
        cv.fillStyle = "white"
        cv.fill()
    </script>

这样，太极图也就成型了。

太极图虽然是canvas里面一个非常简单的东西。但是，在绘制的过程中一点要注意圆的原点坐标，半径等细节部分的问题。希望大家学好canvas后，画出更加精妙绝伦的东西。

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>太极图</title>
</head>

<body style="background-color: steelblue;">
    <canvas width="1000" height="1000" id="cv"></canvas>


    <script>
        var c = document.getElementById("cv")
        var cv = c.getContext('2d')
        cv.beginPath()
        cv.arc(500, 500, 150, 0.5 * Math.PI, 1.5 * Math.PI, false)
        cv.fillStyle = "black"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 500, 150, 0.5 * Math.PI, 1.5 * Math.PI, true)
        cv.fillStyle = "white"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 425, 75, 0.5 * Math.PI, 1.5 * Math.PI, false)
        cv.fillStyle = "white"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 575, 75, 0.5 * Math.PI, 1.5 * Math.PI, true)
        cv.fillStyle = "black"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 425, 20, 0, 2 * Math.PI, false)
        cv.fillStyle = "black"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 575, 20, 0, 2 * Math.PI, false)
        cv.fillStyle = "white"
        cv.fill()
    </script>

</body>
</html>

学到了吧？学到就是赚到。

如果觉得文章对你有点帮助，请微信搜索「 弘成IT 」还有更多的干货与你分享，并且还可以回复【加群】加入技术交流群与千位大咖一起交流学习

技术骚气男
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas制作动态太极图
H&B Blog
08-06 1411
用 canvas 画布绘制出一个会旋转的太极图 方法一： 运用css动画来实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态版太极图</title> <style> *{ margin: 0; ...
使用canvas绘制太极
qq_31800209的博客
09-08 826
太极图 今天学习canvas，哈哈哈，其实我还搞不清楚方向来者，不过太极倒是画出来了，记录一下，方便日后查询 理论：绘制圆形cxt.arc(x,y,r,起点弧度（3点位置），终止弧度，bool(默认是false:顺时针，true:逆时针)) 下图是老师画的解析图，为了方便分析，我贴过来了，其实老师和我画的方法不一样，hhh，再次感叹一下 老师的用法：cxt.arc(600,600,100,Math.PI0.5，Math.PI1.5),是右边半圆。 成图： 代码如下：` //大圆部分 cxt
用canvas画一个太极图（八卦图）
yanhappiness
03-28 4585
用canvas画一个太极图（八卦图）源码展示链接： yanhappiness.github.io/html/canvas-src.html理解什么是canvascanvas是HTML5新增的标签，用于图形的绘制。通过脚本 (通常是JavaScript)来完成.如何使用canvas也就是说canvas只是定义了一块画布，而真正实现路径,盒、圆、字符以及添加图像的绘制是借助于脚本javascript实
用canvas画太极
weixin_50813125的博客
09-23 202
画太极的思路 1.2.3.4. 5.6. 上代码 <script> //获取canvas对象 var canvas=document.querySelector("canvas"); //获得2d上下文对象 var count=canvas.getContext("2d"); //1.绘制最大的空心圆 ...
Android 画一个太极图实例代码
09-01
4. 绘制太极图的眼睛：太极图通常有两个小圆圈作为眼睛，我们可以使用类似的方法，先画出小圆，再通过布尔运算减去眼睛内部的白色部分。 ```java // 画黑色眼珠 mPaint.setColor(0xff000000); Path eyeBlack = new ...
基于canvas画一个太极图
04-29
基于canvas画一个太极图
用canvas画心电图的示例代码
09-22
在本文中，我们将探讨如何使用HTML5的Canvas API来绘制心电图。Canvas是一个强大的图形绘制工具，允许开发者通过JavaScript动态地在...对于实际的心电图数据，可以将其转换为坐标点，然后用类似的方法绘制在Canvas上。
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> ...
JS用Canvas绘制太极图.
11-15
1.本项目是基于Dcloud的有一个移动APP项目 2.html5页面同时支持浏览器中访问 (绘制太极界面可以直接在浏览器中运行)
利用html5 canvas动态画饼状图的示例代码
09-28
在本文中，我们将深入探讨如何使用Canvas API来创建动态饼状图。 首先，让我们了解Canvas的基本概念。Canvas是一个基于矢量图形的画布，可以使用JavaScript来绘制图形。`<canvas>`元素是HTML5的一个新特性，通过`...
使用canvas画太极图
weixin_30596735的博客
07-29 160
定义和用法 arc() 方法创建弧/曲线（用于创建圆或部分圆）。 提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。 提示：请使用 stroke或 fill方法在画布上绘制实际的弧。 JavaScript 语法： context.arc(x,y,r,sAngle,eAngle,counterclockwise); 参...
HTML5 Canvas组件绘制太极图案
web开发
02-03 276
一实现思路： 实现原理主要是利用HTML5的Canvas组件提供的path函数功能来绘制圆，首先绘 制两个半圆，分别为黑色和白色，组成一个圆，绘制完成以后再分别绘制一个黑色 和白色的圆在绘制好的黑白圆之内，半径恰好是黑白大圆一半。 最后在绘制好的两 个黑白小圆内分别填充白色和黑色的点，半径大小为10pixel左右。 二程序效果如下： ...
canvas画太极
William.Yao的博客
11-16 400
最近看了一部电影《太极2：英雄崛起》恰巧里面有我最喜欢的bady再加上上大学时也学过太极拳。索性就用canvas画个太极吧，供大家乐呵乐呵~ <canvas width="600" height="400" id="myCanvas"></canvas><script> var c=document.getElementById('myCanvas'); var cxt= c.get
JavaScript中canvas绘制太极图案
粥要熬。
05-05 1422
代码如下<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> canvas{background: #A9A9A0} </style> </head> <body> <canva
HTML5 Canvas 绘制太极图
weixin_34415923的博客
11-15 504
代码： <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>太极图</title>...
canvas绘制太极图
ramosTears123的博客
03-25 415
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas{ border: 1px ...
canvas实现太极图
qq_45378970的博客
10-05 150
效果图 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #a1{ border: 1px solid red; background-color: light
canvas画太极图
最新发布
06-26
太极图是一种中国传统文化符号，具有深刻的哲学内涵。下面是一个简单的太极图绘制过程： 1. 首先需要在HTML中添加一个Canvas标签，并设置其宽度和高度： ``` <canvas id="myCanvas" width="200" height="200"></...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值