行星旋转案例canvas-konva.js未封装前的代码

2023-12-26 22:48

本文主要是介绍行星旋转案例canvas-konva.js未封装前的代码,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

静止状态下:

整体代码:

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><title>webitcast案例</title><style>body {padding: 0;margin: 0;background-color: #f0f0f0;overflow: hidden;}</style><script src="bower_components/konva/konva.min.js"></script>
</head>
<body><div id="container"></div><script type="text/javascript">var stage=new Konva.Stage({//创建舞台container:'container',width:window.innerWidth,height:window.innerHeight});var bgLayer=new Konva.Layer();stage.add(bgLayer);//开始创建圆形//中心点坐标var centX=stage.width()/2;var centY=stage.height()/2;//圆形的半径var innerRadius=126;var outerRadius=220;//虚线圆环var innerCircle=new Konva.Circle({x:centX,y:centY,radius:innerRadius,stroke:'#ccc',strokeWidth:4,dash: [10,4],//虚线});var outerCircle=new Konva.Circle({x:centX,y:centY,radius:outerRadius,stroke:'#ccc',strokeWidth:4,dash: [10,4],});//中心蓝色的圆圈var centerCircle=new Konva.Circle({x:centX,y:centY,radius:70,fill:'#525A82',opacity:.8});//中心圆形的圆环var centerRing=new Konva.Ring({x: centX,y: centY,innerRadius: 70,//内环的半径outerRadius: 88,//外环的半径fill: '#E1E1E1',opacity: .6})//添加中心圆形的字体var centerText=new Konva.Text({x:centX-140/2,y:centY-9,width:130,align:'center',text:'web全栈',fontSize:18,fontFamily: '微软雅黑',fill: '#fff',fontStyle:'bold'});// 开始画动画层//第一层圆形,黄色的// 坐标设置var x1=centX+innerRadius*Math.cos(-60*Math.PI/180);var y1=centY+innerRadius*Math.sin(-60*Math.PI/180);var orangeCircle1=new Konva.Circle({x:x1,y:y1,radius:30,fill:'orange',opacity:.7});//黄色圆的圆环var orangeRing1=new Konva.Ring({x:x1,y:y1,innerRadius:30,outerRadius:38,fill: '#E1E1E1',opacity: .6});console.log(x1)console.log(y1)var orangeText=new Konva.Text({x:x1-30,y:y1-8,width:60,// align:'center',text:'HTML5',fontSize:16,fontFamily: '微软雅黑',fill: '#fff',fontStyle:'bold'});//第一层圆形,Pink色的var x2=centX+innerRadius*Math.cos(180*Math.PI/180);var y2=centY+innerRadius*Math.sin(180*Math.PI/180);var pinkCircle1=new Konva.Circle({x:x2,y:y2,radius:30,fill:'pink',opacity:.7});var pinkRing1=new Konva.Ring({x:x2,y:y2,innerRadius:30,outerRadius:38,fill: '#E1E1E1',opacity: .6});var pinkText=new Konva.Text({x:x2-30,y:y2-8,width:60,align:'center',text:'CSS3',fontSize:16,fontFamily: '微软雅黑',fill: '#fff',fontStyle:'bold'});第2层圆形,blue色的var x3=centX+outerRadius*Math.cos(45*Math.PI/180);var y3=centY+outerRadius*Math.sin(45*Math.PI/180);var blueCircle2=new Konva.Circle({x:x3,y:y3,radius:40,fill:'#A4C9F6',opacity:.7});var blueRing2=new Konva.Ring({x:x3,y:y3,innerRadius:40,outerRadius:50,fill: '#E1E1E1',opacity: .6});var blueText=new Konva.Text({x:x3-40,y:y3-8,width:80,align:'center',text:'JS',fontSize:16,fontFamily: '微软雅黑',fill: '#fff',fontStyle:'bold'});bgLayer.add(innerCircle);bgLayer.add(outerCircle);bgLayer.add(centerCircle);bgLayer.add(centerRing);bgLayer.add(centerText);bgLayer.add(orangeCircle1);bgLayer.add(orangeRing1);bgLayer.add(orangeText);bgLayer.add(pinkCircle1);bgLayer.add(pinkRing1);bgLayer.add(pinkText);bgLayer.add(blueCircle2);bgLayer.add(blueRing2);bgLayer.add(blueText);bgLayer.draw();</script>
</body>
</html>

 

 

 

 

 

 

这篇关于行星旋转案例canvas-konva.js未封装前的代码的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/541053

相关文章

Python Transformers库(NLP处理库)案例代码讲解

《PythonTransformers库(NLP处理库)案例代码讲解》本文介绍transformers库的全面讲解,包含基础知识、高级用法、案例代码及学习路径,内容经过组织,适合不同阶段的学习者,对... 目录一、基础知识1. Transformers 库简介2. 安装与环境配置3. 快速上手示例二、核心模

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组

使用Java将DOCX文档解析为Markdown文档的代码实现

《使用Java将DOCX文档解析为Markdown文档的代码实现》在现代文档处理中,Markdown(MD)因其简洁的语法和良好的可读性,逐渐成为开发者、技术写作者和内容创作者的首选格式,然而,许多文... 目录引言1. 工具和库介绍2. 安装依赖库3. 使用Apache POI解析DOCX文档4. 将解析

C++使用printf语句实现进制转换的示例代码

《C++使用printf语句实现进制转换的示例代码》在C语言中,printf函数可以直接实现部分进制转换功能,通过格式说明符(formatspecifier)快速输出不同进制的数值,下面给大家分享C+... 目录一、printf 原生支持的进制转换1. 十进制、八进制、十六进制转换2. 显示进制前缀3. 指

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

Python中使用正则表达式精准匹配IP地址的案例

《Python中使用正则表达式精准匹配IP地址的案例》Python的正则表达式(re模块)是完成这个任务的利器,但你知道怎么写才能准确匹配各种合法的IP地址吗,今天我们就来详细探讨这个问题,感兴趣的朋... 目录为什么需要IP正则表达式?IP地址的基本结构基础正则表达式写法精确匹配0-255的数字验证IP地

MySQL高级查询之JOIN、子查询、窗口函数实际案例

《MySQL高级查询之JOIN、子查询、窗口函数实际案例》:本文主要介绍MySQL高级查询之JOIN、子查询、窗口函数实际案例的相关资料,JOIN用于多表关联查询,子查询用于数据筛选和过滤,窗口函... 目录前言1. JOIN(连接查询)1.1 内连接(INNER JOIN)1.2 左连接(LEFT JOI

使用Python实现全能手机虚拟键盘的示例代码

《使用Python实现全能手机虚拟键盘的示例代码》在数字化办公时代,你是否遇到过这样的场景:会议室投影电脑突然键盘失灵、躺在沙发上想远程控制书房电脑、或者需要给长辈远程协助操作?今天我要分享的Pyth... 目录一、项目概述:不止于键盘的远程控制方案1.1 创新价值1.2 技术栈全景二、需求实现步骤一、需求