面向对象封装--行星旋转案例canvas-konva.js

2023-12-26 22:48
文章标签 封装 js 旋转 案例 canvas 面向对象 行星 konva

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

如图所示案例：

具体讲解：在stage上面绘制一个背景层和一个运动层，背景层保持不变，运动层会随着Animation设置的而运动，而且当鼠标经过运动层的圆圈时，运动速度会明显变慢，鼠标移开后，立马恢复原来运动速度。CSS3和HTML5放入一组中，该所属组顺时针旋转，JS所属组逆时针旋转；字体随着运动，自身反向旋转便能使其永远朝上显示。


html代码：

<!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><script type="text/javascript" src="js/zxjwebitcast.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],});bgLayer.add(innerCircle);bgLayer.add(outerCircle);//中心蓝色的圆圈var cenCircleText=new CircleText({x:centX,y:centY,innerRadius: 70,//内环的半径outerRadius: 88,innerStyle:'#525A82',outerStyle:'#E1E1E1',text:'web全栈',});cenCircleText.addToGroupOrLayer(bgLayer);bgLayer.draw();//创建动画层，这一层会运动var animateLayer=new Konva.Layer();stage.add(animateLayer);//第二层添加黄色和pink色的圆圈//2层的动画var L2Group=new Konva.Group({x:centX,//这样设置后，L2Group的中心坐标为CentX,CentY,因此CSS3的X坐标为innerRadius*……y:centY,});var L2_CircleText_CSS3=new CircleText({x:innerRadius*Math.cos(-60*Math.PI/180),y:innerRadius*Math.sin(-60*Math.PI/180),innerRadius: 30,//内环的半径outerRadius: 40,innerStyle:'orange',outerStyle:'#E1E1E1',text:'CSS3',});L2_CircleText_CSS3.addToGroupOrLayer(L2Group);var L2_CircleText_HTML5=new CircleText({x:innerRadius*Math.cos(180*Math.PI/180),y:innerRadius*Math.sin(180*Math.PI/180),innerRadius: 30,//内环的半径outerRadius: 40,innerStyle:'pink',outerStyle:'#E1E1E1',text:'HTML5',});L2_CircleText_HTML5.addToGroupOrLayer(L2Group);animateLayer.add(L2Group);//第三层的圆圈组装到一个组中var L3Group=new Konva.Group({x:centX,y:centY,});//第3层添加blue色的圆圈var L3_CircleText_JS=new CircleText({x:outerRadius*Math.cos(60*Math.PI/180),y:outerRadius*Math.sin(60*Math.PI/180),innerRadius: 40,//内环的半径outerRadius: 50,innerStyle:'#91BFF8',outerStyle:'#E1E1E1',text:'JS',});L3_CircleText_JS.addToGroupOrLayer(L3Group);//第3层添加blue色的圆圈var L3_CircleText_JQuery=new CircleText({x:outerRadius*Math.cos(240*Math.PI/180),y:outerRadius*Math.sin(240*Math.PI/180),innerRadius: 40,//内环的半径outerRadius: 50,innerStyle:'#DD7FB2',outerStyle:'#E1E1E1',text:'JQuery',});L3_CircleText_JQuery.addToGroupOrLayer(L3Group);animateLayer.add(L3Group);animateLayer.draw();//Konva的帧动画系统var rotateAnglePerSecond=60;//每秒钟旋转的角度var animate=new Konva.Animation(function(frame){//相当于setInterval;每隔一段时间执行该方法；此方法更加智能//计算当前帧需要旋转的角度，var rotateAngle=rotateAnglePerSecond*frame.timeDiff/1000;//timeDiff：两次执行的时间差；是动态变化的，根据浏览器性能变化旋转速度，上一帧和当前帧的时间差// var rotateAngle=2;//旋转的角度;每一帧旋转的角度L2Group.rotate(rotateAngle);////让2层上面的所有圆自己自我反向旋转，以便字体永远正向朝上L2Group.getChildren().each(function(item,index){//获得所有子元素item.rotate(-rotateAngle);});L3Group.rotate(-rotateAngle);L3Group.getChildren().each(function(item,index){item.rotate(rotateAngle);});},animateLayer);//此处表示animate.start();//Konva事件系统animateLayer.on('mouseover',function(){rotateAnglePerSecond=10;});animateLayer.on('mouseout',function(){rotateAnglePerSecond=60;})</script>
</body>
</html>
封装的JS代码zxjwebitcast.js 
function CircleText(option){this._init(option);
}
CircleText.prototype={_init:function(option){this.x=option.x||0;this.y=option.y||0;this.innerRadius=option.innerRadius||0;//内圆半径this.outerRadius=option.outerRadius||0;//圆环半径this.innerStyle=option.innerStyle||'red';//内部圆颜色this.outerStyle=option.outerStyle||'blue'//圆环颜色this.text=option.text||'canvas';//填充文字//让内圆，圆环，字体在一个组中，便于管理this.group=new Konva.Group({x:this.x,y:this.y,});//初始化一个内圆var innerCircle=new Konva.Circle({x:0,y:0,radius:this.innerRadius,fill:this.innerStyle,opacity:.7});this.group.add(innerCircle);//初始化一个圆环var outerRing=new Konva.Ring({x:0,y:0,innerRadius:this.innerRadius,outerRadius:this.outerRadius,fill:this.outerStyle,opacity:.4});this.group.add(outerRing);//初始化一个文字var text=new Konva.Text({x:0-this.outerRadius,y:-7,width:this.outerRadius*2,fill:'#fff',text:this.text,align:'center',fontSize:17,fontFamily: '微软雅黑',fontStyle:'bold'});this.group.add(text);},addToGroupOrLayer:function(arg){arg.add(this.group);}
}


这篇关于面向对象封装--行星旋转案例canvas-konva.js的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/541052。

相关文章

JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
性能分析之MySQL索引实战案例

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题，本文将一起从代码层去分析为什么没有建立索引？ 开源ERP项目地址：https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置
阅读更多...
深入探索协同过滤：从原理到推荐模块案例

深入探索协同过滤：从原理到推荐模块案例

文章目录 前言一、协同过滤1. 基于用户的协同过滤（UserCF）2. 基于物品的协同过滤（ItemCF）3. 相似度计算方法 二、相似度计算方法1. 欧氏距离2. 皮尔逊相关系数3. 杰卡德相似系数4. 余弦相似度 三、推荐模块案例1.基于文章的协同过滤推荐功能2.基于用户的协同过滤推荐功能 前言     在信息过载的时代，推荐系统成为连接用户与内容的桥梁。本文聚焦于
阅读更多...
在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式（Singleton Pattern） 确保一个类只有一个实例，并提供一个全局访问点。 示例代码： class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)
阅读更多...
【区块链 + 人才服务】可信教育区块链治理系统 | FISCO BCOS应用案例

【区块链 + 人才服务】可信教育区块链治理系统 | FISCO BCOS应用案例

伴随着区块链技术的不断完善，其在教育信息化中的应用也在持续发展。利用区块链数据共识、不可篡改的特性， 将与教育相关的数据要素在区块链上进行存证确权，在确保数据可信的前提下，促进教育的公平、透明、开放，为教育教学质量提升赋能，实现教育数据的安全共享、高等教育体系的智慧治理。 可信教育区块链治理系统的顶层治理架构由教育部、高校、企业、学生等多方角色共同参与建设、维护，支撑教育资源共享、教学质量评估、
阅读更多...
客户案例：安全海外中继助力知名家电企业化解海外通邮困境

客户案例：安全海外中继助力知名家电企业化解海外通邮困境

1、客户背景 广东格兰仕集团有限公司（以下简称“格兰仕”），成立于1978年，是中国家电行业的领军企业之一。作为全球最大的微波炉生产基地，格兰仕拥有多项国际领先的家电制造技术，连续多年位列中国家电出口前列。格兰仕不仅注重业务的全球拓展，更重视业务流程的高效与顺畅，以确保在国际舞台上的竞争力。 2、需求痛点 随着格兰仕全球化战略的深入实施，其海外业务快速增长，电子邮件成为了关键的沟通工具。
阅读更多...
poj 2187 凸包or旋转qia壳法

poj 2187 凸包or旋转qia壳法

题意： 给n（50000）个点，求这些点与点之间距离最大的距离。 解析： 先求凸包然后暴力。 或者旋转卡壳大法。 代码： #include <iostream>#include <cstdio>#include <cstdlib>#include <algorithm>#include <cstring>#include <cmath>#include <s
阅读更多...
【区块链 + 人才服务】区块链集成开发平台 | FISCO BCOS应用案例

【区块链 + 人才服务】区块链集成开发平台 | FISCO BCOS应用案例

随着区块链技术的快速发展，越来越多的企业开始将其应用于实际业务中。然而，区块链技术的专业性使得其集成开发成为一项挑战。针对此，广东中创智慧科技有限公司基于国产开源联盟链 FISCO BCOS 推出了区块链集成开发平台。该平台基于区块链技术，提供一套全面的区块链开发工具和开发环境，支持开发者快速开发和部署区块链应用。此外，该平台还可以提供一套全面的区块链开发教程和文档，帮助开发者快速上手区块链开发。
阅读更多...
Node.js学习记录（二）

Node.js学习记录（二）

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2