首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

canvas制作彩虹喷枪(js面向对象小案例)

前段时间在研究canvas,感觉还挺好玩,就写了一个小demo,效果如下: canvas.gif 第一次尝试用js面向对象方式来写,经验不足,还请大家多多包涵。...,在《js常用方法和一些封装(2) -- 随机数生成》中曾经提到过。...,彩虹出现位置也是随机,通过范围随机数来实现: /* * 获取范围随机数 (闭区间) */ function randomRange(start,end){ return Math.floor...(Math.random()*(end-start+1))+start; }; 接下来是彩虹类,面向对象来。...//y轴 ColorBall.prototype.r = 10; //半径 在本案例中,鼠标相当于是彩虹喷枪,我们也面向对象思想来设计它: //RainbowBrush 彩虹喷枪 RainbowBrush

1.7K70
您找到你想要的搜索结果了吗?
是的
没有找到

JS:rem来响应式开发

电脑版商城昨晚做完了,今天赶着做手机端,提到手机端网站第一个想到就是要 适应不同手机屏幕宽度,保证在不同手机上都能正常显示给用户,我之前这类网站都是无脑引进bootstrap。...但前一个项目做完之后我发现bootstrap虽好,但里面的各种样式我利用很少,最多用到它排版,当网站最后上传时候你会发现,即使压缩之后,它也会占用相当大一部分,所以这次我想自己原生写,响应式开发...(你还可以设置更多节点) 媒体查询的话要保证每个像素下都有对应适配效果显然你要设置更小宽度范围; 3.还有就是css3单位rem: rem就是将根节点htmlfont-size值作为整个页面的基准尺寸...那就要用到js在页面加载时获取window宽度(浏览器窗口宽度)$(window).width();在开发手机页面的时候,一般我们设置最大宽度为640px,因为640px可以保证在至今最宽手机上显示时网页两端刚好贴合屏幕...height:10.6rem; border:1px solid #000; box-sizing: border-box; } js

6.1K10

可爱砸烂敌人狗头!《VR Furballs - Demolition》已经登陆Steam

Steam每天都会推出许多VR游戏抢先体验版,但小编精力有限,因此只能挑选一些吸引人游戏推荐给大家。而今天带来,就是一款卡通风格偏休闲VR游戏,并且玩法类似《愤怒小鸟》。...这款游戏名为《VR Furballs - Demolition》,就像游戏名一样,这是一款关于各种可爱毛绒球游戏。游戏中,你目标是摧毁一些邪恶红色尖刺毛搭建建筑,来完成你选择关卡。...此外,游戏没有解释这些毛为什么要参战,但是你真的需要一个理由吗?这个问题可能有点难以回答。反正你只需要尽可能多地得分,尽可能消灭邪恶。...目前,该游戏在Steam抢先体验版,拥有32个可玩关卡(最终版本将有54个关卡),有9种毛可供选择,它们各有特殊能力。同时游戏还会提供6种不同武器,如弹弓、网球拍和棒球棒等。...还有可以帮助你完成挑战道具,包括雷达和子弹时间。 最后,如果你通过了所有关卡而感到无聊的话,游戏还有一个关卡编辑器,玩家可以发挥自己奇思妙想,创建属于自己关卡。

78150

聊聊字节跳动 Node.js RPC 设计实现

背景 大家好,我们是字节跳动 Web Infra 团队,目前团队主要专注方向包括现代 Web 开发解决方案、低代码搭建、Serverless、跨端解决方案、终端基础体验、ToB 等等。...插件 支持 Node.js、Golang 等后端语言性能分析平台 维护 Node.js 应用容器镜像 在 2021 年上半年,由于现有的 Node.js RPC 实现逐渐跟不上字节跳动业务发展节奏...因此,对于想做全栈或者后端 Node.js 同学来说,早点了解与使用 RPC 是非常有必要。 既然 RPC 这么重要,那么到底该怎么去理解它呢?...现状 & 需求 在字节跳动内,由于各种原因,存在有多种序列化协议、网络协议,这导致我们没有办法直接使用开源 Apache Thrift、gRPC,只能选择自建 RPC 实现。...write(buf: Buffer): Promise; } 序列化协议 ( Serialization Protocol ),就词组上来看,重点是在 Serialization 上,但如果

86430

聊聊字节跳动 Node.js RPC 设计实现

背景 大家好,我们是字节跳动 Web Infra 团队,目前团队主要专注方向包括现代 Web 开发解决方案、低代码搭建、Serverless、跨端解决方案、终端基础体验、ToB 等等。...插件 支持 Node.js、Golang 等后端语言性能分析平台 维护 Node.js 应用容器镜像 在 2021 年上半年,由于现有的 Node.js RPC 实现逐渐跟不上字节跳动业务发展节奏...因此,对于想做全栈或者后端 Node.js 同学来说,早点了解与使用 RPC 是非常有必要。 既然 RPC 这么重要,那么到底该怎么去理解它呢?...现状 & 需求 在字节跳动内,由于各种原因,存在有多种序列化协议、网络协议,这导致我们没有办法直接使用开源 Apache Thrift、gRPC,只能选择自建 RPC 实现。...write(buf: Buffer): Promise; } 序列化协议 ( Serialization Protocol ),就词组上来看,重点是在 Serialization 上,但如果

1.5K30

我不知道还可以 JS 6 件事

作者:Daniel 译者:前端小智 来源:js-craft JS 是一种灵活语言,这种特性让我们经常觉得它是一门最简单语言,也是最难掌握语言。...我们已经知道,变量作用域和作用域链(即一个按顺序检索对象列表)来进行变量名解析,而 with 语句就是用于暂修改作用域链,其语法为: with(object) 该语句可以有效地将object添加到作用域链头部...const book = { author: '前端小智', title: '我不知道还可以 JS 6 件事' } with(book) { console.log(author...); // 前端小智 console.log(title); // 我不知道还可以 JS 6 件事 } 使用 with语句 JavaScript 代码很难优化,因此它运算速度比不使用...因此,要返回实际未定义值,请使用void运算符。它不是一个非常流行运算符,并且很少使用。 原文:http://www.js-craft.io/blog/6...

1.1K10

聊聊字节跳动 Node.js RPC 设计实现

背景 大家好,我们是字节跳动 Web Infra 团队,目前团队主要专注方向包括现代 Web 开发解决方案、低代码搭建、Serverless、跨端解决方案、终端基础体验、ToB 等等。...插件 支持 Node.js、Golang 等后端语言性能分析平台 维护 Node.js 应用容器镜像 在 2021 年上半年,由于现有的 Node.js RPC 实现逐渐跟不上字节跳动业务发展节奏...因此,对于想做全栈或者后端 Node.js 同学来说,早点了解与使用 RPC 是非常有必要。 既然 RPC 这么重要,那么到底该怎么去理解它呢?...现状 & 需求 在字节跳动内,由于各种原因,存在有多种序列化协议、网络协议,这导致我们没有办法直接使用开源 Apache Thrift、gRPC,只能选择自建 RPC 实现。...write(buf: Buffer): Promise; } 序列化协议 ( Serialization Protocol ),就词组上来看,重点是在 Serialization 上,但如果

1.5K30

python计算杯子、、方体容积或体积

print('杯子容积为:%.2f'%volume) return '谢谢您使用,欢迎下次光临!'...('体积为:%.2f'%volume) return '谢谢您使用,欢迎下次光临!'...def menu(): print('''-------欢迎使用简便容/体积计算------- 计算杯子容积 【请输入1】 计算体积 【请输入2】 计算正/长方体体积...“好像换一个组”工作室') 3 结语 小组成员针对如何用计算杯子、球体或者方体容积或者体积问题,提出使用python定义函数和python if判断语句方法。...通过实验,证明该方法是有效。通过对定义函数和if判断语句运用,巩固了课堂上学习知识,提升了将所学知识运用到实际生活中能力。

3300

OpenCV—Node.js教程系列:Tensorflow和Caffe“游戏”

在本教程中,我们将学习如何在OpenCVDNN模块中加载来自Tensorflow和Caffe预先训练模型,我们将利用Node.js和OpenCV深入研究两个对象识别的例子。...示例代码链接地址: https://github.com/justadudewhohacks/opencv4nodejs/blob/master/examples/dnnTensorflowInception.js...这就是我们调整图像大小原因,确保它最大尺寸是224,我们白色像素填充图像剩余维度,比如宽度=高度(padToSquare)。...我们可以再次通过置信度来过滤结果,并将矩形绘制成每个识别对象图像。 行动过程 为了简单起见,我将跳过绘制矩形和其他所有用于可视化内容代码。如果你想知道怎么,你可以看看样本代码。...结语 这就是使用OpenCV和Node.js来神经网络识别图像中物体过程。

1.6K100

SparkStreaming奇怪

作者:尹会生 无需授权即可转载,甚至无需保留以上版权声明 Spark Steaming 是非常著名流式计算工具,这次用它来搞一个奇葩需求:开发给定一个日志同步服务器,日志达到10MB会同步过来一个新文件...这个奇葩需求要注意两个点,一个是文件会不断增加,所以要定时删除文件;另一个是"error"会在不定长时间出现。...首先我们来搞定Spark Steaming 启动问题,Spark Steaming 支持“文本文件 流”函数, 即textFileStream(),要是这个调用你需要先导入一个streaming库...import org.apache.spark.streaming._ , 然后声明Streaming入口 StreamingContext(sparkConf, Seconds(1)) 这里...Seconds(1)是每隔多久来一次统计,最后想要开始时候执行 sparkstreamingcontext.start()。

645100

【教程】OpenCV—Node.js教程系列:Tensorflow和Caffe“游戏”

在本教程中,我们将学习如何在OpenCVDNN模块中加载来自Tensorflow和Caffe预先训练模型,我们将利用Node.js和OpenCV深入研究两个对象识别的例子。...示例代码链接地址: https://github.com/justadudewhohacks/opencv4nodejs/blob/master/examples/dnnTensorflowInception.js...这就是我们调整图像大小原因,确保它最大尺寸是224,我们白色像素填充图像剩余维度,比如宽度=高度(padToSquare)。...我们可以再次通过置信度来过滤结果,并将矩形绘制成每个识别对象图像。 行动过程 为了简单起见,我将跳过绘制矩形和其他所有用于可视化内容代码。如果你想知道怎么,你可以看看样本代码。...让我们把汽车图像输入网络,然后用分类名称 car 来过滤结果: 好了!现在做一些有难度。让我们尝试…早餐桌上物品? 结语 这就是使用OpenCV和Node.js来神经网络识别图像中物体过程。

2.3K80

Python 文本挖掘流程

预处理(对这里高质量讨论结果修改,下面的顺序仅限英文) 去掉抓来数据中不需要部分,比如 HTML TAG,只保留文本。结合 beautifulsoup 和正则表达式就可以了。...去掉长度过小单词。len<3 是通常选择。 去掉 non-alpha 词。同样,可以正则表达式完成 \W 就可以。 转换成小写。 去掉停用词。Matthew L....nltk 里面提供了好多种方式,推荐 wordnet 方式,这样不会出现把词过分精简,导致词丢掉原型结果,如果实在不行,也 snowball 吧,别用 porter,porter 结果我个人太难接受了...重新去掉长度过小词。是的,再来一遍。 重新去停词。上面这两部完全是为了更干净。 到这里拿到基本上是非常干净文本了。如果还有进一步需求,还可以根据 POS 结果继续选择某一种或者几种词性词。...jieba 是纯 Python 写,Stanford 可以通过 nltk 调用,复旦 NLP 也可以 Python 调用。 END.

1.7K80

【大厂技术内幕】字节跳动原来是这么数据迁移!

数据迁移 目标 能够描述项目数据迁移方案 了解hbase特点 能够熟悉数据迁移中数据包装和转换 能够完成文章数据全量和增量迁移 能够完成热点文章数据迁移 1 为什么需要自动同步 因为MySQL...保存着我们爬取以及自建数据,对于爬取数据,数据量比较大,使用mysql 存储会影响mysql性能,并且我们需要对数据进行流式计算,对数据进行各种统计,mysq满足不了我们需求,我们就将mysql...因为热点数据会失效,定期清除mysql和mongodb中过期数据 2.3 数据同步注意问题 HBASE数据主要靠rowKey进行查询,rowKey设计就用mysql中主键ID作为rowKey...,查询时候直接根据Rowkey获取数据 因为需要同步到HBASE数据是多个数据表数据,一条数据由多个对象组成,存储时候使用列族区分不同对象,里面存储不同字段。...StorageEntry 公共存储对象一个key-value字段 4.1.3 Hbase操作相关工具类 (1)HBaseConstants 类 配置类Hbase存储表名称 public class

67820

Python —— 模块更多

在前面的学习内容中,我们唯独没有将就是我们导入模块,我们导入到底是什么呢?...其实,我们导入模块是保存在单独文件中一段Python 代码,当你想要使用文件中函数和数据时,在你代码最前面 “导入”(import 即可)。...但是我们有时只是为了模块中某个函数,又要该怎么呢?  ...,sys 是system 简称,我们直接导入我们需要函数,在后面的程序中就不用再加入sys.这个前缀了,导入sys作用可以使你代码使用操作系统,下面我们就用Python 来打印下我们正在使用操作系统...#点分隔版本号 #version_info 是包含如下信息一个元组:主版本号、次版本号、小版本(修订)号 #我是 3.7.0 依次对应:3.7.0 if sys.version_info

35310
领券