html
梧桐深院
这个作者很懒,什么都没留下…
展开
-
解决css转盘游戏中transform:rotate不能多次转动问题
解决css转盘游戏中transform:rotate不能多次转动问题用css的transform属性实现的转盘游戏,都是让元素转动指定的角度来实现抽奖的目的。假如我们的转盘被分成了八份,每一份就是45度,如下图:当我们要抽中某一个时,一般都会把指针指向扇形的中间,所以如果要指向第一个扇形的中间,就是转动22.5度,在上图,我们用指针的逆时针转动,来解释转盘的顺时针转动。要指向其它的扇形就是再依次增加45度。但是这样每次转盘的转动都不会超过一圈,对于一个抽奖游戏来说,可能效果不太好。所以我们随机出某个原创 2021-07-03 22:27:49 · 1280 阅读 · 4 评论 -
步骤分解:教你五步实现css转盘抽奖小游戏
教你五步实现css转盘抽奖小游戏先看一下整体效果。分解思路:第一步:先画一个园这里是class="box"代码段第二步:在圆上面再画一个圆圈,加点阴影效果,有那么点立体的感觉这里是在上面的基础累加上class="turntable"代码段第三步:画小圆灯累加上class="little-circle"代码段,这里小圆灯等分用到了transform-origin属性,找准旋转的圆心即可。第四步:画扇形奖品区画扇形是一个比较头疼的问题,这里是用平行四边形代替,把多余的部分遮住,留原创 2021-07-03 13:42:28 · 2098 阅读 · 3 评论 -
js操作css的多种方式
dom方式操作cssh5 API(classList)方式css om方式<html><head><style> .white{ height:30px; width:100px; background-color:#fff; border:red 1px solid; } .black{ height:30px; width:100px; background-color:#000; border:red原创 2021-05-23 17:31:29 · 480 阅读 · 0 评论 -
html5 拖拽(上传)ctrl + v上传原理解析
实现元素拖拽的步骤1 把元素的draggable属性设置为true draggable=“true”2 拖放开始ondragstart触发dragstart事件3 当拖放到其它元素上ondragover会触发dragover事件4 放置元素时ondrop会触发drop事件拖拽过程中的其它事件:...原创 2021-05-19 13:59:19 · 545 阅读 · 0 评论 -
拖拽上传event.dataTransfer.files始终为空
这是一个bug,当我console.dir(event.dataTransfer);时,显示files的length为0,这让我一直以为没有获取到拖拽的文件,然而当我console.dir(event.dataTransfer.files);时,却显示我拖拽的文件信息。如下图:原创 2021-05-15 20:29:14 · 1509 阅读 · 2 评论 -
postMessage 跨文档消息传递
可应用于如下场景:页面和其打开的新窗口的数据传递页面与嵌套的 iframe 消息传递多窗口之间消息传递示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>sender</title></head><body><script> // 发送 function sen原创 2021-05-11 13:28:45 · 269 阅读 · 0 评论 -
html5 canvas 截图demo(带半透明遮罩)
效果图:代码地址:原创 2021-04-27 18:57:01 · 825 阅读 · 0 评论 -
css outline属性,实现选区以外加半透明遮罩
outline:rgb(220,220,220,0.7) solid 5000px;原创 2021-04-27 08:48:36 · 471 阅读 · 0 评论 -
getBoundingClientRect在页面发生滚动时值发生改变
这是由于getBoundingClientRect参考的是视窗的左上角,而不是文档的左上角,如果想要在页面发生滚动时还以文档的左上角为参考点,只需把滚动值加上即可。即 top+window.scrollYleft+window.scrollX参考文档:https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect...原创 2021-04-25 00:08:58 · 1065 阅读 · 0 评论 -
html5 Canvas马赛克效果的实现原理与撤销操作
我们的世界因五彩缤纷的颜色而美丽,彩色照片也是因为有多种颜色而变得漂亮。如果把一张照片的颜色都换成同一种颜色,那么这照片也不能称之为照片了,而是涂了颜色的板。如果把照片的局部区域的多个像素换成同一种颜色,那么照片就会变得模糊不清,这就是马赛克的原理。这个变换的过程当然需要一个成熟的算法,效果才会显得自然。撤销每一次操作完毕后,都存一个快照,每执一次撤销操作,就取出上一个快照进行恢复。...原创 2021-04-23 22:59:43 · 307 阅读 · 0 评论 -
html5 Canvas 图片灰度处理
图片灰度处理有什么用?1 在摄影中呈现一种老照片的效果2 在计算机计算时,比如相似图片搜索,灰度就够了,彩色照片信息量太大,不利于计算。有时候灰度还不够,甚至用二值照片,即所有像素转换为非黑即白。ocr识别时,也会对图片进行灰度处理。当然,在上述应用场景中,也不一定会用canvas处理,甚至一定不会用canvas处理, 但是,canvas确实可以实现图片的灰度处理。实现思路1、先用drawImage()把图片画到canvas上2、再利用getImageData()获取图片的像素信息,求出r g原创 2021-04-23 22:01:48 · 635 阅读 · 0 评论 -
html5 Canvas getImageData颜色选择器
原理先用drawImage把图片画在canvas上给canvas绑定mousemove监听函数,在函数内部计算鼠标当前的坐标,取该像素的颜色值把该颜色值拼接成字符串显示出来,供复制效果图代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Canvas-getImageData颜色拾取器</title> <s原创 2021-04-11 16:42:10 · 408 阅读 · 0 评论 -
–allow-file-access-from-files解决chrome通过file协议加载文件报跨域问题
chrome默认是不可以通过file协议加载文件的,当然,这里这样说不标准,并不是所有的情况都不可以通过file协议加载,比如,写了个本地的html,还是可以加载js,css,图片等资源的。但是在某些情况下通过file协议加载数据,就会报跨域问题。比如目前我遇到以下两种情况:一、学习ES6模块化的时候,加载本地模块,就会报跨域问题,例如,下面的代码:<script src="./aaa.js" type="module"></script>二、加载本地图片,用canvas获取原创 2021-04-11 12:48:31 · 8530 阅读 · 6 评论 -
html5 Canvas基本使用示例
一个小小的实例,几乎包含了Canvas的所有用法。关于可重用代码,有一条重要的建议:一般绘制都应从原点开始,应用变换(缩放、平移、旋转等),然后不断修改代码直至达到希望的效果。比如我们要画一片小树林,那么我们可以封装一个在原点画一棵树的方法,然后通过变换,重复调用这个画树的方法,即可实现画出一片树林的效果。效果图:用到的小路背景图:<!DOCTYPE html><html lang="en"><head> <meta charset="UT原创 2021-04-09 23:26:16 · 245 阅读 · 0 评论