使用canvas画一个八卦图

最新推荐文章于 2021-09-23 18:17:22 发布
最新推荐文章于 2021-09-23 18:17:22 发布
阅读量146 收藏
点赞数
原文链接：http://www.cnblogs.com/lyl-0667/p/11241113.html
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>八卦图</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            text-align: center;
        }
        #myCanvas {
            background-color: #eee;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="600" height="600"></canvas>

    <script>
        // 获取到画布元素
        let myCanvas = document.getElementById("myCanvas");
        // 通过画布元素获取到上下文（画笔）
        let ctx = myCanvas.getContext("2d");

        // 右边白色的半圆
        ctx.fillStyle = "#fff";
        ctx.beginPath();
        ctx.arc(300, 300, 100, (Math.PI / 180) * 270, (Math.PI / 180) * 90);
        ctx.fill();

        // 左边黑色的圆
        ctx.fillStyle = "#000";
        ctx.beginPath();
        ctx.arc(300, 300, 100, (Math.PI / 180) * 270, (Math.PI / 180) * 90, true);//逆时针画圆
        ctx.fill();

        // 左边白色的小圆
        ctx.fillStyle = "#fff";
        ctx.beginPath();
        ctx.arc(300, 250, 50, (Math.PI / 180) * 270, (Math.PI / 180) * 90, true);
        ctx.fill();

        // 右边黑色的小圆
        ctx.fillStyle = "#000";
        ctx.beginPath();
        ctx.arc(300, 350, 50, (Math.PI / 180) * 270, (Math.PI / 180) * 90);
        ctx.fill();

        // 黑色的小圆点
        ctx.fillStyle = "#000";
        ctx.beginPath();
        ctx.arc(300, 250, 5, 0, Math.PI * 2);
        ctx.fill();

        // 白色的小圆点
        ctx.fillStyle = "#fff";
        ctx.beginPath();
        ctx.arc(300, 350, 5, 0, Math.PI * 2);
        ctx.fill();
    </script>
</body>
</html>

 

转载于:https://www.cnblogs.com/lyl-0667/p/11241113.html

weixin_30402343
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用canvas画一个太极八卦图
qq_44748497的博客
12-08 514
首先是一个静态的八卦图： 这是状态图 主要代码如下： 左半圆 ctx.beginPath() ctx.arc(250,250,200,Math.PI*1.5,Math.PI*0.5,true) ctx.fill() //右半圆 ctx.beginPath() ctx.arc(250,250,200,Math.PI*1.5,Math.PI*0.5) ctx.fillStyle = 'white' ctx.fill() //.
Canvas绘制八卦图
越陌度阡
06-29 1230
运用Canvas绘图编写一个八卦图效果。 最终效果如下： 代码实现如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas绘制八卦图</title> <style type="te......
canvas绘制八卦图
艾夏SEO
12-05 983
// 获取对象 var Canvas = document.querySelector('Canvas'); //获取绘图环境 var ctx = Canvas.getContext('2d'); // 绘制八卦图 // 3.1 大圆 ctx.beginPath(); ctx.arc(250,250,250,0,Math.PI,true);
用canvas画一个太极图（八卦图）
yanhappiness
03-28 4561
用canvas画一个太极图（八卦图）源码展示链接： yanhappiness.github.io/html/canvas-src.html理解什么是canvascanvas是HTML5新增的标签，用于图形的绘制。通过脚本 (通常是JavaScript)来完成.如何使用canvas也就是说canvas只是定义了一块画布，而真正实现路径,盒、圆、字符以及添加图像的绘制是借助于脚本javascript实
canvas画八卦图
WeiflR10的博客
01-09 181
methods:{ getapp(){ var canvas=document.getElementById('wholeCanvas') this.canvas2d=canvas.getContext('2d') canvas.width = 1000; canvas.height = 800; //左...
基于canvas画一个太极图
04-29
基于canvas画一个太极图
html5使用canvas画一条线
09-28
本文是html5的一个简单应用，使用canvas画一条线，其实是自己学习canvas之后的一个练习题，这里分享给大家，超级简单。
html5使用canvas画三角形
09-28
主要介绍了html5使用canvas画三角形,需要的朋友可以参考下
canvas画布导出为图片
01-07
方法返回一个包含图片展示的 data URI 语法： canvas.toDataURL(type, encoderOptions)； type | 可选 图片格式，默认为 image/png encoderOptions | 可选 在指定图片格式为 image/jpeg 或 image/webp的情况下， ...
html5使用Canvas绘图的使用方法
09-28
HTML5的Canvas是Web开发中的一个强大特性，它允许开发者使用JavaScript进行动态图像渲染，创建出丰富的交互式图形。Canvas通过一系列的绘图API提供了在网页上绘制2D图形的能力，使得无需借助额外的插件或框架，就能...
利用canvas制作太极八卦阵
A_hapiness的博客
09-23 328
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
canvas太极八卦图
m0_50855143的博客
09-23 192
我们在画太极图时，首先得知道思路是怎样的 1、先画一个大圆； 2、大圆两边分别是颜色黑、白的半圆； 3、然后再是两个小圆组成的弧形； 4、再是更小的圆组成的小圆点。 好的，理清了思路，我们就开始写了 获取canvas元素 var myCanvas = document.getElementById('myCanvas'); 创建画布对象 var context = myCanvas.getContext('2d'); canvas元素本身是不具备绘图能力的，我们要通过getCont.
使用canvas做一个八卦图（动态的）
weixin_43478869的博客
12-04 1067
用canvas做一个太极的效果 先说一下思路 画一个大圆，然后在分割成两个半圆（是太极的那种半圆，不是直接分两个半圆），然后在再两个半圆中画两小圆。大概思路就是这样的。 先给你们放个图看一下（颜色你可以随便调） 下来给你上代码 &lt;script type="text/javascript"&gt; // 获取canvas元素 var canvas = document.q...
css画八卦图
gongstrong123的专栏
03-15 2947
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } .yin-yang1 {
Html5 Canvas 系列_绘图三(H5 ，CSS3 动态八卦图)
Cloud 专栏
01-19 3985
使用 html5 css3 实现一个动态八卦图，并能实现转动，太极生二仪；
地县级城市建设道路清扫保洁面积 道路清扫保洁面积道路机械化清扫保洁面积 省份 城市.xlsx
06-22
数据含省份、行政区划级别（细分省级、地级市、县级市）两个变量，便于多个角度的筛选与应用 数据年度：2002-2022 数据范围：全693个地级市、县级市、直辖市城市，含各省级的汇总tongji数据 数据文件包原始数据（由于多年度指标不同存在缺失值）、线性插值、回归填补三个版本，提供您参考使用。 其中，回归填补无缺失值。 填补说明： 线性插值。利用数据的线性趋势，对各年份中间的缺失部分进行填充，得到线性插值版数据,这也是学者最常用的插值方式。 回归填补。基于ARIMA模型，利用同一地区的时间序列数据，对缺失值进行预测填补。 包含的主要城市： 通州 石家庄 藁城 鹿泉 辛集 晋州 新乐 唐山 开平 遵化 迁安 秦皇岛 邯郸 武安 邢台 南宫 沙河 保定 涿州 定州 安国 高碑店 张家口 承德 沧州 泊头 任丘 黄骅 河间 廊坊 霸州 三河 衡水 冀州 深州 太原 古交 大同 阳泉 长治 潞城 晋城 高平 朔州 晋中 介休 运城 永济 .... 等693个地级市、县级市，含省级汇总 主要指标：
从网站上学习到了路由的一系列代码
最新发布
06-22
今天的学习圆满了
使用Canvas画一个流程图demo给我
03-11
以下是一个简单的Canvas流程图demo的代码： ```html <!DOCTYPE html> <title>Canvas流程图demo canvas { border: 1px solid black; } <canvas id="myCanvas" width="400" height="400"></canvas> ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值