小沅白-CSDN博客

原创 canvas实现贝塞尔曲线运动

正题前的逼逼赖赖：上一篇实现了绘制出理想的贝塞尔曲线获取三次贝塞尔曲线的点坐标（canvas），然后就要实现曲线运动了。效果图注意点找到贝塞尔曲线上的点的坐标，用到了计算公式B(t) = (1-t) [(1-t)2P0+ 2 (1-t) tP1 + t2P2] + t [(1-t)2P1+ 2 (1-t) tP2 + t2P3]，0 <= t <= 1其中可以控制t的值来实现一个运动的效果，关于这个计算有很多大佬的博客有些。找找就有了要绘制的如果是规则的形状就就不提了，如果绘制

2020-09-04 10:54:24 1688

原创获取三次贝塞尔曲线控制点坐标（canvas）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style></h

2020-09-04 10:16:46 2829

原创 typescript的基础类型（1）

TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript。目录布尔值数字字符串数组元祖枚举anyvoid null 和 undefined\在定义了变量的类型之后，赋值其他类型会报错。布尔值最基本的数据类型就是简单的true/false值let bol: boolean = false;bol = 1;//Error:不能将类型“1”分配给类型“Boolean”数字TypeScript里的所有数字都是浮点数。这些浮点数的类型是 number。支持十进

2020-08-09 15:58:23 404

原创 promise与settimeout的应用

事情是这样的，我写了一个活动，活动里面有一个卡牌翻转效果，它长这样：一个典型css3的翻转，与标题看起来并无什么关系。然后我又写了这样三个卡牌的翻转，它长这样：跟延迟操作带了点关系。于是奇怪的博客诞生了。这个效果是：1.当卡牌翻转完毕之后，显示提示文案。2.当步骤1完成之后，将剩下的卡牌也翻转。三者的介绍setTimeout...

2020-08-09 10:40:58 664

原创大富翁实现

目录思路效果代码思路扔骰子的整个过程可以拆分为：1.扔骰子，获得点数2.拿到点数，在dom元素上进行走步操作3.走步操作结束后，如果有奖励判定，进行奖励判定操作效果代码css部分 .map{ display: grid; grid-template-columns: repeat(11,90px);//设置列数和每列宽 grid-template-rows: repeat(11,90px);//设置行数和每行高

2020-07-27 10:00:47 1155

原创拼图游戏Canvas版

原身一开始写的拼图是用div一个一个列出来的，里面放的是切好的图片。拼图小游戏（前端）canvas版的思路游戏结束的判定与上一个版本一样，数组的顺序达到了它对应的位置，表示游戏结束。因为使用canvas，我们需要记录每块拼图在图片上的位置和大小，记录成数组canvas方法canvas.drawImage()使用可以参照drawImage()方法代码部分HMTL  流程1，选择想拼的图片 <div class="pro

2020-07-15 15:29:16 1109

原创拼图小游戏（前端）

每次元素的交换都会引起数组的变化，根据这个，来完成页面的重新渲染实现‘交换’效果，莫得动画html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen

2020-06-24 17:07:58 920 1

原创 ThinkPHP学习总结（前端部分）

学习新的框架时候，与自己知道的框架做对比，理解起来比较容易。在看ThinkPHP的时候，我用vue与它做对比记忆。输出变量在后台给出的接口文档中，会给出数据模版变量输出的变量名，及数据格式和含义。需要区分输出的变量是否为关联数组关联数组与JavaScript中的对象用法很相似，但是直接在html或者js中获取整个关联数组会报错，只能获取关联数组中具体某个键对应的值，或者后台将关联数组进行json转换，才能正常获取整个输出变量使用方法： <!--字符串 {$name}=<?php e

2020-06-18 17:47:17 591

原创 Less常用的知识点

Less常用的知识点变量LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。命名变量必须在变量名前加“@”，‘：’表示赋值，必须以分号结束 @img_patch:'../../img/cancer/pc/';变量插值将图片资源所在的文件夹路径定义成一个变量，在设置背景图片时，就可以试使用该变量替代路径，当文件夹路径发生改变时，也可以直接修改该变量，非常便利。 @img_patch:'../../img/cancer/pc/'; .sky{ backgr

2020-06-18 16:28:23 281

原创关于字符串的正则

字符串的正则匹配,与相同字符串不相等的问题字符串的正则匹配电话号码的正则数字的正则字符串不相等的问题字符串的正则匹配电话号码的正则/^1[3456789]\d{9}$表示当字符串以1开始且第二位字符是[3,4,5,6,7,8,9]中的任一一个最后跟上九位的数字，只有符合这种规则的字符串才是手机号码数字的正则/^[1-9]{1}[0-9]*|0{1}([.]{1}[0-9]+){0,...

2019-12-27 08:58:54 145

原创原生js实现拖拽排序

思路–拖动元素得到位置确定元素对应的数据，在数组中位置–代码部分css样式* { margin: 0; padding: 0; } #drag{ width: 300px; } .de-p { font-size: 20px; ...

2019-12-26 11:25:29 1300

原创将考勤数据与日历结合

打卡日历参考地址https://blog.csdn.net/weixin_42283981/article/details/87976273在此基础上做了修改思路在日历对象中，确认当前月的天数：找到本月的第一天和下个月的第一天html<!DOCTYPE html><html lang="en"><head> <meta ch...

2019-12-26 11:17:10 786 1

小沅白的工作笔记