【原生js 基于canvas写一个简单的前端 截图工具】的更多相关文章

原生js 基于canvas写一个简单的前端 截图工具

先看效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .clip-img-w{ position: relative; width: 100%; height: 100%; font-si…

用node.js从零开始去写一个简单的爬虫

如果你不会Python语言,正好又是一个node.js小白,看完这篇文章之后,一定会觉得受益匪浅,感受到自己又新get到了一门技能,如何用node.js从零开始去写一个简单的爬虫,十分钟时间就能搞定,步骤其实很简单.node的安装就不一步步的解释了,如果不会可以自行百度.在node开大环境下开始第一步: 1:在d盘新建一个文件夹WebSpider 2:cmd右键以管理员模式打开,进入d盘,cd 进入刚刚创建的文件夹里面 cd WebSpider 3:mkdir FirstSpider (创建一个…

用Canvas写一个简单的游戏--别踩白块儿

第一次写博客也不知怎么写,反正就按照我自己的想法来吧!怎么说呢?还是不要扯那些多余的话了,直接上正题吧! 第一次用canvas写游戏,所以挑个简单实现点的来干:别踩白块儿,其他那些怎么操作的那些就不用再扯了,大家应该都懂,不懂的看到黑色的就点就是了,扯多了我打字手也累,大概.链接给你们:http://nowtd.cn/white/ 咱不是理论派,所以在这里不会扯多少理论. 首先看看html的结构吧 <header class="container"> <article…

使用 js，自己写一个简单的滚动条

当我们给元素加上 overflow: auto;  的时候,就会出现滚动条,然而浏览的不同,滚动条的样式大不一样,有些甚至非常丑. 于是就想着自己写一个滚动条,大概需要弄清楚一下这几个点: 1.滚动条 bar 是根据内容的多少,高度不一样的,这个需要动态的计算 2.滚动条 bar 的 top 位置 和 内容scrollTop 的关系. 思路: 使用嵌套的布局,如下: <!DOCTYPE html> <html> <head> <meta charset="…

基于Blazor写一个简单的五子棋游戏

写这个五子棋游戏,其实主要目的是想尝试一下微软新作Blazor.Blazor对于那些搞.NET的程序员,又想做一些前端工作,真的挺友好,不用一句JS就可搞定前端交互,美哉.现在已经有很流行的前端框架,如vue.react.angular等,微软出这个blazor框架,目前观测下来,在国外还满火的,国内就没什么声响了,一方面.net在国内影响本来也不大,另一方面搞.net的也怕被微软又给坑了,所以都是一种观望状态. 扯远了,回到正题,五子棋游戏,本质上还是个二维数组,值0表示空位,1表示黑子,2表…

第一个Three.js程序——动手写一个简单的场景

三维场景基本要素: 步骤: 代码: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="js/three.js"></script>…

js eval函数写一个简单的计算器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><style>*{margin:2px;}#text #inputText{ width:150px; height:40px; border:#06C 1px sol…

分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业不是百度来的,我只是百度了一些示例代码的意思,怎么用!算了,越解释万一越黑呢!哈哈O(∩_∩)O哈哈~) ----------------------------------------------------------------分界线------------------------------…

Particles.js基于Canvas画布创建粒子原子颗粒效果

文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫酷,能和鼠标互动吸附或者是躲避鼠标指针. 使用方法 1.该粒子动画库插件使用方法非常简单,首先要在页面中引入particles.js文件. <script src="js/particles.js"></script> 2.在页面中使用一个div来作为放置粒子的容器…

原生js实现canvas气泡冒泡效果

说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入JumpBubble.js一个js文件即可 项目源码地址: https://github.com/wanghairong-i/JumpBubble== 使用demo: ES6版本的使用demo: const bubble = new JumpBubble(document.getElementById…