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

2023-12-26 22:48

本文主要是介绍面向对象封装--行星旋转案例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

相关文章

PostgreSQL的扩展dict_int应用案例解析

《PostgreSQL的扩展dict_int应用案例解析》dict_int扩展为PostgreSQL提供了专业的整数文本处理能力,特别适合需要精确处理数字内容的搜索场景,本文给大家介绍PostgreS... 目录PostgreSQL的扩展dict_int一、扩展概述二、核心功能三、安装与启用四、字典配置方法

Python中re模块结合正则表达式的实际应用案例

《Python中re模块结合正则表达式的实际应用案例》Python中的re模块是用于处理正则表达式的强大工具,正则表达式是一种用来匹配字符串的模式,它可以在文本中搜索和匹配特定的字符串模式,这篇文章主... 目录前言re模块常用函数一、查看文本中是否包含 A 或 B 字符串二、替换多个关键词为统一格式三、提

Golang如何对cron进行二次封装实现指定时间执行定时任务

《Golang如何对cron进行二次封装实现指定时间执行定时任务》:本文主要介绍Golang如何对cron进行二次封装实现指定时间执行定时任务问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录背景cron库下载代码示例【1】结构体定义【2】定时任务开启【3】使用示例【4】控制台输出总结背景

Python get()函数用法案例详解

《Pythonget()函数用法案例详解》在Python中,get()是字典(dict)类型的内置方法,用于安全地获取字典中指定键对应的值,它的核心作用是避免因访问不存在的键而引发KeyError错... 目录简介基本语法一、用法二、案例:安全访问未知键三、案例:配置参数默认值简介python是一种高级编

MySQL中的索引结构和分类实战案例详解

《MySQL中的索引结构和分类实战案例详解》本文详解MySQL索引结构与分类,涵盖B树、B+树、哈希及全文索引,分析其原理与优劣势,并结合实战案例探讨创建、管理及优化技巧,助力提升查询性能,感兴趣的朋... 目录一、索引概述1.1 索引的定义与作用1.2 索引的基本原理二、索引结构详解2.1 B树索引2.2

从入门到精通MySQL 数据库索引(实战案例)

《从入门到精通MySQL数据库索引(实战案例)》索引是数据库的目录,提升查询速度,主要类型包括BTree、Hash、全文、空间索引,需根据场景选择,建议用于高频查询、关联字段、排序等,避免重复率高或... 目录一、索引是什么?能干嘛?核心作用:二、索引的 4 种主要类型(附通俗例子)1. BTree 索引(

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

Python中对FFmpeg封装开发库FFmpy详解

《Python中对FFmpeg封装开发库FFmpy详解》:本文主要介绍Python中对FFmpeg封装开发库FFmpy,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录一、FFmpy简介与安装1.1 FFmpy概述1.2 安装方法二、FFmpy核心类与方法2.1 FF

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

六个案例搞懂mysql间隙锁

《六个案例搞懂mysql间隙锁》MySQL中的间隙是指索引中两个索引键之间的空间,间隙锁用于防止范围查询期间的幻读,本文主要介绍了六个案例搞懂mysql间隙锁,具有一定的参考价值,感兴趣的可以了解一下... 目录概念解释间隙锁详解间隙锁触发条件间隙锁加锁规则案例演示案例一:唯一索引等值锁定存在的数据案例二: