- 博客(29)
- 资源 (30)
- 问答 (2)
- 收藏
- 关注
原创 仿360水波评分特效、加速球特效、水波动态加载动画、可改造成圆形进度条,很丝滑!
先看一下最终效果 正弦曲线正弦曲线公式y = A sin(Bx + C) + D 振幅是 A,A 值越大,曲线更陡峭 B值越大 周期越短 C水平位移 垂直位移是 D,控制曲线上下移动实现思路首先来绘制曲线 1.定义构造函数和初始化方法//sin曲线构造函数 function drawSin(option){ this.init(option); } //初始化 drawSin.prototyp...
2021-01-27 12:56:03
3346
33
原创 原来写刮刮卡这么简单,几行代码就搞定,你来你也行,谢谢惠顾!
利用属性属性 globalCompositeOperation,设置值为 destination-out,后绘制的图形会擦除与先绘制图形重叠的部分效果图:思路1.写一个div,div的内容就是刮开后的结果;2.画布设置好定位,将div盖住(此时是透明的);3.在画布上画一个长方形,并使用颜色(这里使用默认的黑色),这就把卡盖住了;4.设置globalCompositeOperation属性为destination-out;4.为画布添加鼠标移动事件,在鼠标的位置画一个小圆,就
2021-01-26 15:39:03
3243
5
原创 老婆说程序员不懂浪漫,程序员默默拿起了键盘,这就亲手带你去看流星雨,女人真的会影响男人拔刀的速度!
效果图实现思路1.写一个流星对象//定义流星雨 function Fire(){ this.x=getRandom(0,canvas.width),//流星雨的x坐标 this.y=0,//流星雨的y坐标 this.radius=getRandom(0.5,2),//流星雨的半径 this.speed=getRandom(2,4),//运行的速度 this.angle=0.6*Math.PI,//发射的方向 //this.color='white';//颜色
2021-01-26 15:16:08
1816
14
原创 一个非常漂亮的圆形滑块Round Slider,可修改成圆形进度条!
滑块效果图改动百分比效果图思路首先绘制一个灰色边框的圆 ctx.translate(150,150);//坐标定位至150,150处 ctx.beginPath(); ctx.lineWidth='20'; ctx.strokeStyle='#EEEEEE'; ctx.arc(0,0,radius,0,2*Math.PI);//绘制一个完整的圆 ctx.stroke(); 再绘制一个半径一样、圆心一样蓝色的圆 ctx...
2021-01-21 16:19:21
4278
15
原创 女儿说要看烟花,但是政府规定不能放,程序员爸爸默默的拿起了键盘,程序员就是要为所欲为!
一不给政府填麻烦、二给自己省银子,三给女儿带来了开心、激动,一举三得,何乐而不为!效果图:完整代码(代码里面有详细注释就不另作说明了):<!DOCTYPE html><html> <head lang="en"> <meta charset="GBK"> <title></title> <style>body{ margin: 0; padding: 0; back
2021-01-19 19:45:10
7621
44
原创 一个精美的时钟动画
完整代码,代码有注释就不说明了<!DOCTYPE html><html> <head lang="en"> <meta charset="GBK"> <title></title> <style>* { margin: 0; padding: 0;}canvas { border: 1px solid; position: absolute; margin-left: 200...
2021-01-18 17:39:46
1072
6
原创 利用canvas绘制饼状图
代码中有注释,就不多说了很容易看明白 var canvas = document.getElementById('canvas'); canvas.width='600'; canvas.height='400'; var ctx = canvas.getContext('2d'); var sum=0;// 总和 var arr = [];//存储每一个扇形的值 var colors = [];//存储每一个扇形的颜色 var start = 0;//每一个扇形的开始π
2021-01-18 11:17:52
1204
1
原创 用canvas来绘制柱状图,简单明了,绝对实用!
首先借助图片画一个简单的柱状图var canvas = document.getElementById('canvas'); canvas.width='300'; canvas.height='300'; var ctx = canvas.getContext('2d'); draw() function draw(){ var image = new Image();//创建Image对象 image.src='images/1.png';//指定路径
2021-01-15 21:54:19
4289
3
原创 canvas实现一个线性图
方法drawImage(image, x, y)其中image是 image 对象,x和y 是其在目标 canvas 里的起始坐标。 var canvas = document.getElementById('canvas'); canvas.width='300'; canvas.height='300'; var ctx = canvas.getContext('2d'); draw() function draw(){ var image ...
2021-01-15 20:38:08
490
1
原创 canvas绘制文字
fillText(text, x, y [, maxWidth])在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的.strokeText(text, x, y [, maxWidth])在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的. var canvas = document.getElementById('canvas'); canvas.width='300'; canvas.height='300'; var ctx = canvas.getCo
2021-01-15 20:27:17
2494
原创 canvas给文字增加阴影效果
var canvas = document.getElementById('canvas'); canvas.width='300'; canvas.height='300'; var ctx = canvas.getContext('2d'); draw() function draw(){ ctx.shadowOffsetX=-3;//用来设定阴影在 X轴的延伸距 ctx.shadowOffsetX=-3;//用来设定阴影在 Y轴的延伸距 ..
2021-01-15 19:32:07
2251
原创 canvas绘制跑马灯lineDashOffset、lineDashOffset
var canvas = document.getElementById('canvas'); canvas.width='300'; canvas.height='300'; var ctx = canvas.getContext('2d'); var offset=0; function draw(){ ctx.clearRect(0,0, canvas.width, canvas.height); ctx.setLineDash([10,4, 2]);//实线..
2021-01-15 18:00:59
1534
原创 canvas绘制虚线setLineDash
window.onload=function(){ ctx.beginPath(); ctx.setLineDash([]);//设定实线与空白的大小 ctx.moveTo(50,100); ctx.lineTo(250,100); ctx.stroke(); ctx.beginPath(); ctx.setLineDash([4]);//设定实线与空白的大小 ctx.moveT.
2021-01-15 17:44:52
2749
4
原创 canvas的lineCap线段端点模样和 lineJoin线段连接处模样
lineCap设置线段端点显示的模样。它可以为下面的三种的其中之一:butt,round和square,默认是butt。window.onload=function(){ var canvas = document.getElementById('canvas'); canvas.width='300'; canvas.height='300'; var ctx = canvas.getContext('2d'); ctx.beginPath(); ...
2021-01-15 17:04:43
1500
2
原创 丢失api-ms-win-crt-runtime-|1-1-0.dll的解决办法
问题今天开机发现提示:丢失api-ms-win-crt-runtime-|1-1-0.dll ,导致好些软件不能打开!解决办法微软官方下载https://www.microsoft.com/zh-cn/download/details.aspx?id=4814564位系统下载 x64的,32位系统下载x86双击安装等界面看到设置成功即可等待一会成功了...
2021-01-15 09:55:17
873
1
原创 canvas绘制二次贝塞尔曲线、三次贝塞尔曲线、画爱心
方法说明quadraticCurveTo(cp1x, cp1y, x, y)绘制二次贝塞尔曲线,cp1x,cp1y为一个控制点,x,y为结束点。bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)绘制三次贝塞尔曲线,cp1x,cp1y为控制点一,cp2x,cp2y为控制点二,x,y为结束点。画一个二次贝塞尔曲线 window.onload=function(){ var canvas = document.getElementById('c.
2021-01-14 17:54:13
1831
原创 canvas画圆
画圆方法说明arc(x, y, radius, startAngle, endAngle, anticlockwise)该方法有六个参数:x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时,是逆时针方向,否则顺时针方向。实例1 window.onload=function(){ var canvas = document.get
2021-01-14 17:07:15
13782
1
原创 canvas绘制三角形
主要还是利用画直线的方法lineTo moveTo实例1 window.onload=function(){ var canvas = document.getElementById('canvas'); canvas.width='300'; canvas.height='300'; var ctx = canvas.getContext('2d'); //先将笔尖移动到0,0处 ctx.moveTo(100,100); //先将笔滑到200,200处..
2021-01-14 16:16:11
4105
原创 canvas绘制直线
说明: lineTo(x, y) 绘制一条从当前位置到指定x以及y位置的直线。 moveTo(x, y) 将笔移动到指定的坐标x以及y上。 stroke() 描边 lineWidth 设置线的宽度 strokeStyle 设置线条的颜色实例1 window.onload=function(){ var canvas = document.getElementById('canvas'); canvas.width='300'; canvas.height='...
2021-01-14 16:00:14
3792
原创 canvas绘制矩形
canvas提供了三个API,分别是:1.绘制一个填充的矩形 fillRect(x, y, width, height)2.绘制一个矩形的边框 strokeRect(x, y, width, height)3.清除指定矩形区域,让清除部分完全透明 clearRect(x, y, width, height)其中x、y是相对于画布左上角0,0 的距离,width是宽度,height设置矩形高度;实例1 window.onload=function(){ ...
2021-01-14 15:36:08
5968
原创 canvas基本用法
首先创建canvas元素<canvas id="canvas" width="150" height="150"></canvas>width和height 也可以不指定,canvas会初始化宽度为300像素和高度为150像素可以用CSS来指定这两个值,但如果css尺寸与初始画布的比例不一致,它会出现扭曲,所以官方建议用js来设置 width和height这两个属性。var canvas = document.getElementById('canvas'); .
2021-01-14 15:06:00
15287
1
原创 史上最详细最简单的冒泡排序,一学就会,一看就懂,一面试就懵!
什么叫冒泡排序依次比较两个相邻的子元素,如果他们的顺序错误就把他们交换过来,重复地进行此过程直到没有相邻元素需要交换,即完成整个冒泡。现在设定一个数组,元素为 2,4,3,1 我们需要通过冒泡最终排序成1,2,3,4用图来说明一下:那首先我们就对第一个元素2和第2个元素4进行比较,如果第一个元素大于第2个元素则交换位置,否则不交换于是我们编写代码如下 int[] arr = new int[] { 2, 4, 3, 1 }; if(arr[0].
2021-01-13 11:31:25
29491
6
原创 jquery ajax post异步传参乱码问题
用ajax传参的时候发现会出现中文乱码,处理如下:前端传参的地方用encodeURIComponent 包裹参数的内容,如图:后台java用java.net.URLDecoder.decode 来做处理 String name = StringHelper.convertStringNull(request.getParameter("name")); name = java.net.URLDecoder.decode(name, "ut..
2021-01-12 11:18:55
525
原创 用js写一个小插件,解决有些浏览器不支持模态窗口的问题,并且支持嵌套
之前遇到不能打开模态窗口的问题,我就自己封装了一个,拿出来给大家看看参数说明/* url:要打开的页面 option: title --展示的标题 height -- 消息窗口高度 可以填400或者400px,缺省300px width --消息窗口宽度 可以填400或者400px,缺省300px confimCall 打开的模态窗口中按钮“确定”对应的函数名,当模态窗口的页面
2021-01-11 21:13:12
666
2
原创 用js封装一个分页插件,很好用,支持异步加载数据(上一页、下一页、首页、尾页)
自己写了一个分页,觉得蛮好用,放上来大家看看代码里面已经有比较详细的注释,就不解释了 <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <style> *{ margin:0;padding:0; }
2021-01-11 19:30:24
1147
5
原创 java学生成绩管理系统,你的毕设我的心
当年自己学校毕业做毕设的时候,因那时网络还没有现在那么普遍,想要找个参考却也是不容易,我当时也是费了不少功夫才顺利通过答辩,所以呢最近就自己写了一个学生成绩管理系统,可以做为毕设的参考,做毕设的同学和刚入行做开发不久的同行,可以参考一下,应该会有一点的启发吧,从表的设计到代码的编写全部都是自己一手弄的,大家点个关注不过分吧!哈哈!系统介绍以学生成绩作为主题,辅以班级、学生、老师、课程、选课等管理模块(当然因为是做实例,也没有把所有的模块都涉及到)。系统角色1.adminadmin是管理.
2021-01-09 20:42:40
8823
57
原创 我女儿说要看雪,于是我默默的拿起了键盘,下雪咯,程序员就是可以为所欲为!
目录效果图:初始化雪花让雪花动起来当雪花遇到边界(最下面、最右边),就重新设定参数回到最顶上,循环往下飘现在可以看到雪花了,但是雪花会一股脑的落下,不好看,所以设定一个参数来控制,一次落下多少个。运行后发现左边会没有雪,因为是往右飘的,那设置X为负的再往右飘就可以了飘雪完整代码欢迎指正!记得三连哦!效果图:初始化雪花 this.box.style.width=screenWidth+'px'; this.box.style.height=scre
2021-01-04 22:03:41
15926
62
原创 原生js写的左侧飞入拼图特效,你是喜欢美女单飞还是双飞?程序员就是可以为所欲为!
目录先看效果图:实现思路:代码:欢迎指正,整理不易给个三连吧,谢谢拉!!先看效果图:单飞:双飞:完成后的页面:实现思路:1.切图:用 background:url('+url+') no-repeat -60px -60px 这种语法,将图片切成一张张小图,添加到一个数组item里面。2.在上一步中同步用数组keys存取小图的下标,9张小图的话(keys就输数字0-8的数组),同时用另外一个数组存下每个小图的坐标。3.点击开始 用Math.rand
2021-01-04 11:42:40
3445
9
原创 用js写的旋转木马,在新年献给各位刚登基的皇帝,让你的后宫转起来!程序员就是可以为所欲为!
目录效果图:实现的内容:代码奉上:实现原理我就不写了,代码注释的比较详细,欢迎指正!!效果图:实现的内容:1.自动向右旋转。2.点击图片自动把点击的图片旋转到最前面。3.点击向左向右,分别向左向右旋转。代码奉上: <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; ..
2021-01-01 11:32:08
6815
21
Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
2021-06-09
老Java程序员花一天时间写了个飞机大战,很舒服!
2021-06-09
java扫雷游戏,触雷时学姐哭着扑向了你!
2021-06-09
老Java程序员花2天写了个连连看,我竟连不过我女儿,我了个去!
2021-06-09
library.rar
2021-06-04
java植物大战僵尸,我家ADC直呼内行,甚至喊出辅助牛逼、666
2021-05-20
Java用iText5生成PDF、操作pdf、水印
2021-03-12
学生成绩管理系统(jsp+jquery+java+mysql+tomcat)源码
2021-01-09
原力计划第三月榜,感谢小伙伴们的支持!继续加油!
2021-07-01
java和c是不可能有的
2021-06-29
TA创建的收藏夹 TA关注的收藏夹
TA关注的人