canvas八卦图2

最新推荐文章于 2021-12-14 22:10:49 发布
最新推荐文章于 2021-12-14 22:10:49 发布
阅读量271 收藏
点赞数
分类专栏： canvas 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vivian_shuang/article/details/52148587
版权

<!DOCTYPE html>

<html>


<head>

<meta charset="UTF-8">

<title></title>

</head>


<body>

<canvas id="canvas" width="500" height="500"></canvas>

<script type="text/javascript">

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");


ctx.translate(250, 250);

// ctx.rotate(Math.PI/4);


function drawArc(deg) {

ctx.beginPath();

//旋转

ctx.rotate(deg);


//1. 轮廓

ctx.arc(0, 0, 200, 0, Math.PI * 2, true);

ctx.stroke();

ctx.closePath();


ctx.beginPath();

ctx.fillStyle = "black";

ctx.arc(0, 0, 200, Math.PI / 2, Math.PI * 3 / 2, false);

ctx.closePath();

ctx.fill();


//两个小圆

ctx.beginPath();

ctx.arc(0, -100, 100, 0, Math.PI * 2, true);

ctx.fillStyle = "white";

ctx.fill();

ctx.closePath();

ctx.beginPath();

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

ctx.fillStyle = "black";

ctx.fill();

ctx.closePath();


ctx.beginPath();

ctx.arc(0, -100, 20, 0, Math.PI * 2, true);

ctx.fillStyle = "black";

ctx.fill();

ctx.closePath();


ctx.beginPath();

ctx.arc(0, 100, 20, 0, Math.PI * 2, true);

ctx.fillStyle = "white";

ctx.fill();

ctx.closePath();


}

var deg = 0;

// setInterval(function  () {

// deg = Math.PI/6;

// ctx.clearRect(-250,-250,500,500);

//

// drawArc(deg);

// },100);


// function move () {

// deg = Math.PI/6;

// ctx.clearRect(-250,-250,500,500);

// drawArc(deg);

// setTimeout(move,100);

// }

// move();

// 调整转速

var i = 0;

function move () {

i++;

if (i % 7 == 0) {

deg = Math.PI/6;

ctx.clearRect(-250,-250,500,500);

drawArc(deg);

}

//当浏览器渲染刷新的时候调用

window.requestAnimationFrame(move);

}

move();


// function move() {

// // i++;

// // if (i % 7 == 0) {

// // }

// deg = Math.PI / 6;

// ctx.clearRect(-250, -250, 500, 500);

// drawArc(deg);

// //当浏览器渲染刷新的时候调用

// window.requestAnimationFrame(move);

// }

// move();

</script>

</body>


</html>

Vivian_shuang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
用canvas画一个太极八卦图
qq_44748497的博客
12-08 526
首先是一个静态的八卦图： 这是状态图 主要代码如下： 左半圆 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转base64/jpeg时透明区域变成黑色背景的方法
12-30
在用canvas将png图片转jpeg时，发现透明区域被填充成黑色。 代码如下： XML/HTML Code复制内容到剪贴板 <p>Canvas：  <canvas u00a0id=canvas style></canvas>    <p>Base64转码后的图片：  ...
canvas 绘制八卦图
weixin_30786657的博客
03-09 170
绘制要点:　　 　　1.getContext('2d');　　　　-->绘图环境,2维空间 　　2.fillRect(x,y,w,h);　　　　-->矩形:实心(黑色背景) 　　3.strokeRect(x,y,w,h);　　　　-->矩形:空心(白色背景) 　　4.clearRect(x,y,w,h);　　　　-->矩形:在已存在的矩形中挖空一个矩形 　　5.c...
canvas绘制八卦图
艾夏SEO
12-05 993
// 获取对象 var Canvas = document.querySelector('Canvas'); //获取绘图环境 var ctx = Canvas.getContext('2d'); // 绘制八卦图 // 3.1 大圆 ctx.beginPath(); ctx.arc(250,250,250,0,Math.PI,true);
Canvas绘制八卦图
越陌度阡
06-29 1242
运用Canvas绘图编写一个八卦图效果。 最终效果如下： 代码实现如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas绘制八卦图</title> <style type="te......
canvas八卦图1
Vivian_shuang的博客
08-08 490
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> head> body> canvas id="canvas" width="500" height="500">canvas> script type="text/javascript"> var canvas = document
抖音八卦时钟
05-03
在制作抖音八卦时钟的过程中，开发者首先需要根据时间计算出八卦图中的各个元素的位置。八卦图通常包含八条直线（代表八卦的八个卦象）和一个圆心。每条直线表示一个时辰（古代计时单位），对应一天中的两个小时。...
html-css-js-demos:用ccs3制作一个八卦图
04-02
HTML5增加了许多新元素，比如`<canvas>`用于绘制图形，以及离线存储、媒体元素等，但考虑到八卦图的简单几何形状，这个项目可能并未大量依赖HTML5的特定功能。CSS3和HTML是构建现代网页的基石，而“mobile”标签意味...
基于HTML5 + css3 技术实现一个八卦阵.zip
最新发布
02-13
开发者可能使用了`canvas`的绘图API，如`fillRect()`、`strokeRect()`等方法来绘制八卦图的各个部分。 2. `<audio>`和`<video>`元素：虽然“八卦阵”项目主要涉及图形展示，但HTML5的多媒体元素也可能用于增强用户...
时间罗盘(类型八卦的时间罗盘).zip
02-13
"时间罗盘"是一种独特的数字时钟展示方式，它结合了传统的八卦理论和现代的数字技术，创造出一种新颖且有趣的视觉体验。在信息技术领域，这种应用通常涉及到编程、图形用户界面设计以及多媒体交互技术。 首先，我们...
利用HTML和CSS制作一个八卦图.md
04-01
利用HTML和CSS制作一个可以旋转的八卦图
html css 八卦图,CSS动画-八卦图
weixin_29005499的博客
06-30 176
该楼层疑似违规已被系统折叠隐藏此楼查看此楼Document#in>div{width:150px;height:80px;border:1pxsolid #ddd;position:absolute;top:310px;left:425px;}#c1{transform:rotatey(0deg)translatez(200px);}#c2{transform:rotatey(180deg...
html css 八卦图,用CSS实现阴阳八卦图等图形_html/css_WEB-ITnose
weixin_42520580的博客
06-21 296
CSS还是比较强大的，可以实现中国古典的“阴阳八卦图”等形状。正方形#rectangle { width: 200px; height: 100px; backgrount-color: red; } #circle { width: 100px; height: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; bo...
动态八卦图html,用CSS实现阴阳八卦图等图形_html/css_WEB-ITnose
weixin_35472986的博客
06-08 359
CSS还是比较强大的，可以实现中国古典的“阴阳八卦图”等形状。正方形#rectangle { width: 200px; height: 100px; backgrount-color: red; } #circle { width: 100px; height: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; bo...
动态八卦图html,HTML绘制太极八卦图
weixin_30227565的博客
06-08 1214
实现效果如下：实现代码如下：太极八卦图div{text-align: center;margin-top: 30px;}#mytj{background-color: skyblue;}var mytj = document.getElementById('mytj');var mt = mytj.getContext('2d');//左边黑色大半圆mt.beginPath();mt.arc(30...
html5 css3画八卦图,用纯CSS3绘制乾坤八卦图
weixin_34139050的博客
06-10 1577
乾坤八卦图衍生自中国古代的《河图》与《洛书》，伏羲根据燧人氏造设的这两幅星图所作。其形状经过抽象以后，成为对称感相当强的几何图形，无论是黑白两色还是形状，都非常地平衡和稳重。不难发现，乾坤八卦图的形状均为圆形。而css3绘制圆的方法也很简单，设置圆角半径等于50%即可，所以绘制起来十分方便。大体结构就是两个半圆，左白右黑，然后上下分别绘制一个半径等于大圆一半的圆，上黑下白，最后加上两个圆点即可。总...
html制作动态八卦图源码
weixin_43474701的博客
12-14 2734
动态八卦图 自动旋转的八卦图，一个html文件就行，如下动态图所示： taijitu.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="taiji"> </div> </body> <style&gt
html5绘制八卦图,用cad画八卦图的方法步骤详解
weixin_42279320的博客
07-09 1780
今天在家研究了很久CAD，AUTOCAD中如何制作八卦图形?其实方法很简单的。那么下面小编给大家整理了关于用cad画八卦图的方法，希望大家喜欢。用cad画八卦图的方法步骤1首先打开CAD，OP空格(打开选项)显示——颜色——二维模型空间——统一背景——白色——应用并关闭用cad画八卦图的方法步骤图12：选择LA空格(打开图层)线宽——0.3——确定将最下方的显示线宽打开用cad画八卦图的方法步骤图...
CSS伪类实现加号
CaseyWei
11-15 921
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
HTML5 Canvas 2D绘图指南
2. **二维绘图上下文**： - **状态**：Canvas维护着绘图状态，包括当前的颜色、样式、变换等，可以通过保存和恢复状态来管理这些属性。 - **转换**：包括缩放、旋转和平移，允许对图形进行复杂的定位和变形。 - *...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值