html5
关注
分享
扫一扫
暮志未晚NAN
这个作者很懒，什么都没留下…
展开
-
使用canvas实现对图片的旋转
注意点：一定要先变换完成后才可以旋转。默认canvas是原点位置旋转，可以通过对原点偏移进行设置切换旋转中心。封装的方法，第一个传img，必须load完成的，第二个传入一个角度 function createCanvas(img, deg) { const canvas = document.createElement("canvas"); canvas.height = img.height; canvas.width = img.width;原创 2020-05-26 14:33:00 · 4508 阅读 · 1 评论 -
使用css3 实现3d正反翻转特效
首先，上传一下最终效果：接下来，我们按照结构来实现当前的demo效果：第一步，创建一个触发hover效果的容器，并设置3d距离：<!--item 可以触发翻转的区域--><div class="item">...</div>设置.item的perspective属性距离，就是3d效果的z轴距离，浏览器默认就xy两个轴向，css3增加了z轴，就是...原创 2020-01-09 14:39:00 · 2900 阅读 · 0 评论 -
使用canvas实现对图片的翻转
要通过canvas实现对图片沿x轴或者颜色y轴实现翻转，我们可以通过canvas2d的接口进行实现。使用到的api：使用getContext来获取canvas2d对象使用 canvas2d对象的scale方法进行翻转由于翻转的xy轴使用的是原点，也就是canvas的左上角的位置的轴，所以，我们还需要使用到translate方法，来移动将翻转后的图片移动到canvas的显示区域逻辑说完了，...原创 2019-12-10 23:37:19 · 4559 阅读 · 0 评论 -
canvas 获取鼠标位置是否处于图形中
实现这个思路的方法就是使用canvas对象的context的2d对象的方法：isPointInPath我们可以通过这个方法判断绘制的图形，以及自己通过随机的点绘制的2d图形以下是demo的源码：<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"/> <...原创 2019-10-23 15:06:14 · 3556 阅读 · 0 评论 -
使用canvas画布实现高斯模糊效果
最近项目中有一个需求是实现图片的局部模糊效果，看上去一个挺难的效果。在实现局部模糊效果前，首先能够实现全部模糊。经过和度娘的一番较劲后，找到了一个不错的案例：https://blog.youkuaiyun.com/sunshineanl/article/details/70240250。然后在他的基础上，经过一番修改，和备注，实现了当前的案例：&lt;!doctype html&gt;&lt;html ...原创 2018-11-06 11:44:57 · 8114 阅读 · 6 评论 -
canvas 将折线转换成曲线
实现原理依靠canvas 2d的api方法context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);来实现绘制曲线。实现目标具体过程代码Vector2，一般用来表示向量，但有的时候也用来当作点来进行一计算。var Vector2 = function(x, y) { this.x = x; th转载 2018-01-22 19:12:33 · 2461 阅读 · 3 评论 -
canvas内的字体实现阴影效果
api介绍可以通过几种全局context属性来控制阴影。 shadowColor任何CSS中的颜色值。可以使用透明度（alpha） ShadowOffsetX像素值。值为正数，向右移动阴影；值为负数，向左移动阴影 shadowOffsetY像素值。值为正数，向下移动阴影；值为负数，向上移动阴影 shadowBlur高斯模糊值。值越大，阴影边缘越模糊案例代码html l转载 2018-01-12 16:52:35 · 9989 阅读 · 3 评论 -
将图片文件转换为base64格式的代码工具案例
<!doctype html><html lang="cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">原创 2017-12-05 11:39:36 · 1953 阅读 · 1 评论 -
如何获取input框type=file选中的文件对象（FileReader）
最近突发奇想想做一个现在常用的图像上传然后从中截取头像保存的案例，所以做了一些准备工作，比如input框选择文件触发的哪些事件，这一节就保存一下我们如何获取input的type=file的input框的文件数据。如果想获取通过input选择的文件的数据，我们就需要使用到js封装好的FileReader对象。获取对象：首先我们需要通过FileReader构造函数实例化对象。var原创 2017-07-31 01:57:17 · 44187 阅读 · 4 评论 -
获取dom的最终的css属性值
需求我们有的时候需要测试看一下属性是否设置成功，所以需要通过dom去获取css样式。但是，如果使用原生去获取的话，会发现只有在dom身上设置的才能够获取的到，如dom.style.width，只有直接写到标签上，才能够获取的到，而在别的地方的我们将获取不到，今天我们就研究一下，直接获取写在style标签的css属性。就像jq的css()方法一样getComputedStyle方法我们可以通过getC原创 2017-11-10 00:38:17 · 2176 阅读 · 1 评论 -
css3 可穿透的盒子标签属性 pointer-events
作用使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（将会穿过父元素而指向位于其下面的元素）。原创 2017-10-31 17:06:18 · 1803 阅读 · 1 评论 -
html5 input设置允许的文件类型上传
在html5里面设置input的accept属性即可。案例值允许图片类型可以上传<input type="file" name="pic" id="pic" accept="image/*" />只允许jpg格式的文件上传<input type="file" name="pic" id="pic" accept="image/jpeg" />允许jpg，png和gif格式的图片上传<in原创 2017-10-31 11:53:55 · 3556 阅读 · 1 评论 -
css的居中问题
水平居中设置1、行内元素设置 text-align:center2、定宽块状元素设置 左右 margin 值为 auto 3、不定宽块状元素a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 autob:给该元素设置 displa:inine 方法c:父元素设置 p转载 2018-01-16 15:44:17 · 440 阅读 · 1 评论 -
html5的陀螺仪
获取移动设备的陀螺仪，需要知道陀螺仪包含什么。我们可以让document监听deviceorientation 来获取相关的数据，里面包括3个值 alpha、beta和gamma。这三个值分别代表：（1）alpha：移动设备水平放置时，绕z轴旋转的角度，数值为0度到360度。（2）beta：移动设备水平放置时，绕X轴旋转的角度，数值为-180度到180度。翻译 2017-06-16 11:25:43 · 12735 阅读 · 2 评论 -
移动端使用 vConsole 打印console的信息数据
问题由于在移动端无法打开控制台，所以想办法打印console的数据一直很苦恼。之前一直用chrome的inspect调试移动端，但是那样有一个问题，就是只能使用移动版的chrome查看数据，今天，群里的无痕小伙伴给我推荐了一个由微信出品的叫 vConsole。 vConsole 是一个由微信公众平台前端团队研发的 Web 前端开发者面板，可用于展示 console 日志，方便开发、调试。原创 2018-01-30 15:02:53 · 17309 阅读 · 1 评论 -
indexedDB 浏览器本地存储
indexedDB为何物在使用一个技术之前，先搞清楚它是什么，这对你的理解很重要，从DB就可以看出，它肯定是一个数据库，而说到数据库，有两种不同类型的数据库，就是关系型数据库和非关系型数据库，关系型数据库如Mysql、Oracle等将数据存储在表中，而非关系型数据库如Redis、MongoDB等将数据集作为个体对象存储。indexedDB就是一个非关系型数据库，它不需要你去写一些特定的sql语...转载 2018-07-26 00:28:27 · 2712 阅读 · 1 评论 -
使用canvas实现局部高斯模糊效果
这个功能目的是为了模糊一些人的脸部，一些文字信息。主要用于用户手动操作进行模糊。实现的功能：本人实现了再pc端上面进行拖拽模糊。实现思路：首先加载图片，然后再加载完成的回调中，创建一个高斯模糊过的图片画布。接着，绑定鼠标的交互事件，在里面获取到在画布上面点击的位置。通过位置获取当前位置周围的图像数据，进行生成圆形数据。最后，使用drawImage将数据覆盖到画布上面。是不是感觉思路...原创 2018-11-09 18:34:15 · 3393 阅读 · 0 评论 -
使用canvas生成一个圆形的图片
之前发现在网上无法找到相关的内容，找的内容测试也发现有bug。遂，整理思路，自己研究一个可以实现效果的功能。具体思路就是：首先获取到图片的资源，如果使用img加载的，那一定要等img触发onload以后处理。我使用的图片是等宽高的图片，获取到图片资源以后，额外的创建一个canvas，将图像使用drawImage方法画到画布上，我们在这个canvas上面处理图像。通过canvas对象的conte...原创 2018-11-07 19:10:23 · 11064 阅读 · 1 评论 -
实现canvas圆形橡皮檫像素清空功能
由于项目里面需求一个圆形的橡皮檫功能，但是原生的canvas清空方法只有一个clearRect() 方法，这个方法只是可以提供矩形清空的方法。根据项目需求，我们只能想办法实现，最后，通过百度想到的办法就是，通过使用clearRect() 多次清除，来实现圆形清除。逻辑很简单，接下来带上源码，大家可以下载下来，然后将图片的src修改一下，即可。<!doctype html>&l...原创 2018-11-20 10:47:04 · 2970 阅读 · 3 评论 -
通过图片地址，将图片处理成base64，使用ajax上传图片
需求群里的一个小朋友一直要求我帮他实现以下，我就写了一个案例。需求就是，他用canvas生成了一个base64格式的图片，然后需要将这个图片上传到服务器上面去。代码<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi原创 2017-11-27 14:24:36 · 8865 阅读 · 6 评论 -
js 使用ajax进行文件上传并获取上传进度案例
效果由于我给进度添加了一个动画，所以会有零点几秒的延迟代码<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximu原创 2017-10-28 13:39:57 · 8249 阅读 · 1 评论 -
web Workers多线程
在html5中，实现了一个新的标准就是web Workers多线程。众所周知，JavaScript是单线程，如果程序运算过多的话，会出现页面卡卡的现象，这种是异步也无法解决的问题。而web Workers的出现，就是来解决这种问题的。web Workers的出现，我们可以将运算时间过长的表达式分离在一个额外的线程内，而只需要在web Workers运算结束时，将数据传回主线程即可，这样会有效的减...原创 2018-12-17 23:28:24 · 1172 阅读 · 0 评论 -
html5 获取摄像头和麦克风的案例
使用的接口api通过navigator.mediaDevices.getUserMedia()方法进行获取 该MediaDevices.getUserMedia()方法提示用户允许使用产生MediaStream包含所请求类型的媒体的轨道的媒体输入。该流可以包括例如视频轨道（由硬件或虚拟视频源（例如相机，视频记录设备，屏幕共享服务等）产生），音轨（类似地，由物理或虚拟音频源，如麦克风，A / D转换原创 2017-08-30 23:22:20 · 11911 阅读 · 0 评论 -
canvas使用drawImage()方法绘制img和video的区别
drawImage()简介drawImage() 方法在画布上绘制图像、画布或视频。 drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。具体参数 参数 描述 img 规定要使用的图像、画布或视频。 sx 可选。开始剪切的 x 坐标位置。 sy 可选。开始剪切的 y 坐标位置。 swidth 可选。被剪切图像的宽度。 sh原创 2017-08-29 11:06:49 · 14795 阅读 · 1 评论 -
amcharts 图型插件示例，直接复制代码就可查看
#chartdiv { width: 100%; height: 500px;} var chart = AmCharts.makeChart( "chartdiv", { "type": "pie", "theme": "light", "dataProvider": [ { "country": "Lithuania"原创 2016-09-22 17:38:10 · 681 阅读 · 0 评论 -
html5移动端触摸事件touch
移动端主要的触摸事件有三个：touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。touchend事件：当手指从屏幕上离开的时候触发。还有一个有待验证的：touchcancel事件：当系统停止跟踪触摸的时候触发。原创 2017-04-12 17:08:31 · 7932 阅读 · 0 评论 -
移动端解决两个andio不能同时播放的问题
备份一下解决方案，github上的，需要的时候自己来看https://github.com/pupunzi/jquery.mb.audio这里是一些demo：http://pupunzi.github.com/jquery.mb.audio/demo.htmlhttp://pupunzi.github.com/jquery.mb.audio/demo_queue.html原创 2017-04-20 10:10:01 · 2215 阅读 · 0 评论 -
js和css的命名规范
笔者在撸代码是也会遇到不知道给元素或变量起什么名字的问题，中文拼音太俗气，随便敲几个字母又影响代码的查读性。于是总结这些命名规范。有些资料来源于网络 一 .css命名规范 1.命名规则说明： 1）、所有的命名最好都小写2）、属性的值一定要用双引号("")括起来，且一定要有值如class="divcss5",id="divcss5"3）转载 2017-02-28 17:39:42 · 817 阅读 · 0 评论 -
html5 js 图片上传预览
首先获取显示图片的位置和input的对象，判断浏览器是否兼容 var img = document.getElementById("img"); var file = document.getElementById("file"); if(!(window.FileReader && window.File && window.FileList && window.Blob))原创 2016-10-24 16:20:34 · 1109 阅读 · 0 评论 -
html5的localStorage的操作
在客户端存储数据（localStorage &sessionStorage ）Html5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每原创 2017-01-05 10:09:54 · 1448 阅读 · 0 评论 -
html5的经典特效思路
其实特效（Special Effect）的概念很宽泛，无论电影、电视还是游戏，需要特技处理的效果都能被叫做特效。那H5特效呢？简单地说，就是 在网页中实现各种具有想象力的技法，比如触摸碎屏、画卷收缩、冰块撞击、视差滚动等等。这份H5特效创作大全，整理出与H5特效有关的各种实用干货，包括制作技巧、场景应用和网站资源等，篇幅较长，因此分上下两期。以下讲述如何使用iH5的10个特殊功能，实现上万转载 2016-10-10 17:21:20 · 3537 阅读 · 0 评论 -
HTML5离线存储和本地缓存
一.离线存储 有一个web应用有三个文件index.html,a.js,b.css，现在需要把js和css文件缓存起来 1.在index.html里加上 2.manifest清单格式如下CACHE MANIFEST#上面一句必须#v1.0.0#需要缓存的文件CACHE:a.jsb.css#不需要缓存的文件NETWORK:*#无法访问页转载 2016-10-12 08:45:12 · 1058 阅读 · 0 评论 -
html5火焰动画cavans
canvas火焰 body { background: rgb(36, 36, 36); text-align: center; } #fire { width: 100%; height: 100%; } $(document).ready(function() { var sp转载 2016-11-10 16:39:37 · 1326 阅读 · 0 评论 -
CSS3 Filter的十种特效
最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果。今天终于抽出时间学习这个CSS3的Filter。不整不知道呀，一整才让我感到吃惊，太强大了。大家先来看个效果吧：我想光看上面的效果就能吸引你了，要是你自己动手的话，我想您更会感到神奇。细一看，这些效果就像是photoshop整出来的一样，其实是真是这样的，有很多效果都是类似于photoshop中的特效。不过有一转载 2016-09-23 23:06:39 · 490 阅读 · 0 评论 -
css3 矩阵 matrix
css3中的transform让我们操作变形变得很简单，诸如，translate–移动，scale–缩放，rotate–旋转，skew–斜切。这几个属性很方便，也很简单，但是其中matrix我们就不常使用了吧。-webkit-transform: matrix(1, 0, 0, 1, 100, 100)看到这样一句css，你也许很讨厌怎么一堆的数字，你也许斜视matrix–css也能搞出这货？这篇转载 2017-04-14 15:14:52 · 1890 阅读 · 0 评论 -
css3 实现十字光标和光标外圆圈环绕
实现十字光标其实很简单，用更原始的方法也可以实现，本例使用伪类：after和：before来进行定位实现。第二个案例鼠标悬停，所有的外圆的一圈点会跟随着一个一个的变动颜色， 在鼠标悬停上后，会一个一个的变成蓝色。这个也只是用到了css3的过渡，其实，也没有什么难度。只要基础打的好，都可以写出来，里面的dom和css样式，都是通过js循环生成的，因为样式都一样，只是数值有区别。原创 2017-07-18 14:46:21 · 3865 阅读 · 0 评论 -
html5使用canvas画布制作圆形加载动画
之前我写过使用css3制作圆形加载的动画，但是很麻烦。这几天我突然发现使用canvas还更加的简单，为什么我不用canvas做呢？所以，趁着今天有时间，赶紧的整理一下思路，书写了一个简单的案例。这个相对于css3的好处就是，没有那个bug，css3的上下会有一点淡淡的颜色边，而canvas绘制出来的没有bug还很简单。所以，我就写了一个简单的案例。兼容性方面，canvas兼容到原创 2017-07-27 23:43:46 · 4648 阅读 · 0 评论 -
html5将文字生成图片
由于canvas能够将画布上的纹理生成数据给img显示出来，所以，我们在html5里面可以实现将文字生成图片显示。首先我书写了一个将文字绘制到canvas上面的函数，然后函数会返回canvas绘制的纹理数据。//绘制文字到canvas，判断换行位置，和设置canvas高度 function canvasWrapText(options) { var settings原创 2017-08-01 18:19:06 · 14786 阅读 · 5 评论 -
html5 canvas绘制文字按规则换行
今天遇到了一个公司项目，需要使用canvas将文字绘制成图片使用。查了一查网上虽然有相关的代码，但是都是固定的，还不好修改，索性直接自己重新写了一个。在这里提示一下，一定要注意，如果修改了canvas的高度，当前设置的所有的东西都会失效。而且公司还要求每一行开头不能是标点符号，耗费一天的时间，总算写了出来。总的想法是，canvas有一个能够获得将一个字符串绘制到canvas上得到绘制多原创 2017-08-01 18:11:35 · 4541 阅读 · 0 评论 -
select框触发事件过程
我们书写了mousedown，mouseup，click，input，change，focus，blur，keydowm，keydown事件绑定到了select上面，模拟客户选择相关事件的触发流程：最后发现，触发的过程基本上一样，如果没有选择或者选择的是当前显示的option的话，不会触发change事件，只有在选择不同的option时候才会触发change事件。下面是选择了不同的option原创 2017-07-31 00:10:10 · 20368 阅读 · 0 评论