两周前,项目里需要实现一个红心飘飘的点赞效果.抓耳挠腮了老半天,看了几篇大佬的文章,终于算是摸了个七七八八.不禁长叹一声,还是菜啊.先来看一下效果:(传送门进去点一波) 一.Bezier曲线运动轨迹 其实用大白话描述一下需求就是让一个红心图片沿着贝塞尔曲线的轨迹走,然后边走边消失.核心在于得到贝塞尔曲线上的一系列点.本文不会讲解贝塞尔曲线的原理,因为大佬们已经讲过了,而且讲的比我好.参考文章如下: 用canvas绘制一个曲线动画--深入理解贝塞尔曲线 bezierMaker.js--N阶贝塞尔曲

效果: 原理: 用canvas逐行输出文字,然后让背景颜色逐渐加深,再随机中断某些列. 代码: HTML: <canvas id="c"></canvas> CSS: canvas {display: block;} JS: var c = document.getElementById("c"); var ctx = c.getContext("2d"); //全屏 c.height = window.innerHeig

在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的怎么会模糊,先前也有考虑到适配不同尺寸的移动设备,担心直接使用 img 或者设置 background 会使图片拉伸而变得模糊,所以使用 canvas 来绘制转盘与九宫格,精确的计算每个物体所在的坐标以及尺寸绘制出来的,怎么会模糊. 然而将绘制的内容与页面中的其他文字或者图片作对比后,发现使用 ca

文章首发于我的知乎专栏,原地址:https://zhuanlan.zhihu.com/p/26606208 以前看到过一个问题:谢尔宾斯基三角形能用编程写出来么?该怎么写? - 知乎,在回答里,各方大神用各种语言各种方法实现了一遍,非常精彩.我当时也回答了这个问题,是用H5的Canvas实现的.这在前端技术上没什么难度,主要是算法比较有可玩性,所以当时就手痒了. 谢尔宾斯基三角形是分形图形的一种,大概很多人第一次见到它都是在中学教科书上.它长这样: 我用了两种方法构造它:直接绘制三角形和间接用折

最近公司项目需要,利用vue实现pdf导出,从而保存到本地打印出来,说起来好像也很容易,具体要怎么实现呢? 1 .我们要添加两个模块 第一个.将页面html转换成图片 npm install --save html2canvas 第二个.将图片生成pdf npm install jspdf --save 2.定义全局函数..创建一个htmlToPdf.js文件在指定位置.我个人习惯放在('src/utils/htmlToPdf') // 导出页面为PDF格式 import html2Canvas

前文中我们聊了 Data URI 和 base64编码,稍微回顾下.base64编码 是将数据用 64 个可打印的字符进行编码的方式,任何数据底层实现都是二进制,所以都可以进行 base64编码,base64编码 主要用在数据传输过程中(编码.解码).而 Data URI 是将数据用 URI 的形式进行展现.常用的是将图片进行 base64 编码,用 Data URI 的形式进行展现,可以说,base64编码后的字符串是某些 Data URI(这里就包括图片的 base64 URL) 的一部分.

今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在火的不行的html5,html5中的<video>标签,并将从摄像头获得视频作为这个标签的输入来源.实现拍照功能的html5代码: <article> <style scoped> video { transform: scaleX(-1); } p { text-alig

背景:由于在前期开发的过程中,对前端的小图片采用了css-sprite,开始的时候都是在http://spritegen.website-performance.org/站点上合成图片及样式的,但是某天该站点突然不能访问,开始还怀疑是运维把站点给屏蔽了,后来才知道这个站点真的挂了,顿时觉得使用web站点上的工具太没有安全感了,所以决定在本地搭建一个css-sprite的工具环境. 所以接下来就是nodejs的css-sprite之旅了.nodejs处理图片需要使用到node-canvas这个图像

:first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; } img { border: 0; max-width: 100%; height: auto !important; margin: 2px 0; } table { border-collapse: collapse; border: 1px solid #bbbbbb; } td { padding: 4px 8px; border-c

类型化数组是JavaScript操作二进制数据的一个接口. 这要从WebGL项目的诞生说起,所谓WebGL,就是指浏览器与显卡之间的通信接口,为了满足JavaScript与显卡之间大量的.实时的数据交换,它们之间的数据通信必须是二进制的,而不能是传统的文本格式. 比如,以文本格式传递一个32位整数,两端的JavaScript脚本与显卡都要进行格式转化,将非常耗时.这时要是存在一种机制,可以像C语言那样,直接操作字节,然后将4个字节的32位整数,以二进制形式原封不动地送入显卡,脚本的性能就会大幅提

最近工作需要处理头像裁剪以及上传,研究了几天,写点心得,提醒自己记住踩过的坑,能帮助别人当然更好. 功能基本就是这样: 这里需要注意的是:拿到需求后,不要急于直接上手,花费半个小时,甚至更长时间缕清整个脉络是很有必要的,本人就因为后台接口的问题,返工了... 这里只是对完成方法的概述,具体实现功能请自行解决(真的一搜就有)!!! 起先,对这种功能以前并没有接触过,但是鉴于能力问题,采取插件可能是最好的方法. 当然要选取什么插件就成了大问题,幸好本人有一大秘诀,就是去各种已有此功能的网站寻求. 终

转载 http://www.18sucai.com/article/275.htm 传统方法如果想实现拍照功能,需要后台应用程序复杂的编写,但随着html5的发展,在HTML5规范的支持下,Web App已经实现了手机上拍照功能,完全是使用HTML5技术完成.在下面,我将为大家讲解Web App如何用手机进行拍照,显示在页面上并上传到服务器. 首先拍照肯定是视频流,HTML5中已经可以实现获取视频流,主要使用getUserMedia()方法. 1. HTML5获取视频流 HTML5 The Me

二进制数组(ArrayBuffer对象.TypedArray视图和DataView视图)是JavaScript操作二进制数据的一个接口.这些对象早就存在,属于独立的规格(2011年2月发布),ES6将它们纳入了ECMAScript规格,并且增加了新的方法. 这个接口的原始设计目的,与WebGL项目有关.所谓WebGL,就是指浏览器与显卡之间的通信接口,为了满足JavaScript与显卡之间大量的.实时的数据交换,它们之间的数据通信必须是二进制的,而不能是传统的文本格式.文本格式传递一个32位整数

记录了通过ArcGIS的PringTask进行地图打印,以及借助html2canvas实现屏幕截图的方法.两个方法各有适用的情景.过程中涉及的相关资源和问题给出链接,自行查看. 1.需求背景 地图打印,这是地图应用系统的基本工具了.多数使用者都希望能够将地图,连带着查询结果.统计结果以及自己绘制的各种图形输出,将其保存到本地,以供他用.本文描述两类情况:一类是通过ArcGIS Server发布的地图服务,一类是调用其他数据源的地图切片形成的地图. 2.通过ArcGIS Server发布的地图服务

前面我写过关于利用arcgis api for js打印地图的,但是打印地图服务都是基于arcgis server发布的,arcgis api加载在线地图,比如天地图.百度地图.高德地图等,底图都是打印不出来的:这个在GIS之家群里也有很多giser问过,我一直也没抽出时间好好整理研究,碰巧一个师妹遇到这种打印问题并且解决了,于是我向她邀稿,才有这里的这篇文章.本文是‘猴妹‘师妹授权给我来发表的,介绍都是师妹的研究成果,在此,非常感谢‘猴妹‘师妹. 记录了通过ArcGIS的PringTask进行

JS里的ArrayBuffer 还记得某个晚上在做 canvas 像素级操作,发现存储像素的数据格式并不是Array类型,而是ArrayBuffer,心想这是什么鬼?后来查了一些资料,发现自己这半年来的JS是白学了,竟然才知道还有这么个东东. 首先,这个 ArrayBuffer 类型化数组,类型化数组是JavaScript操作二进制数据的一个接口.最初为了满足JavaScript与显卡之间大量的.实时的数据交换,它们之间的数据通信必须是二进制的,而不能是传统的文本格式的背景下诞生的. 分配内存

ArrayBuffer ArrayBuffer ArrayBuffer对象.TypedArray视图和DataView视图是 JavaScript 操作二进制数据的一个接口.这些对象早就存在,属于独立的规格(2011 年 2 月发布),ES6 将它们纳入了 ECMAScript 规格,并且增加了新的方法.它们都是以数组的语法处理二进制数据,所以统称为二进制数组. 这个接口的原始设计目的,与 WebGL 项目有关.所谓 WebGL,就是指浏览器与显卡之间的通信接口,为了满足 JavaScript

ArrayBuffer ArrayBuffer对象.TypedArray视图和DataView视图是 JavaScript 操作二进制数据的一个接口.这些对象早就存在,属于独立的规格(2011 年 2 月发布),ES6 将它们纳入了 ECMAScript 规格,并且增加了新的方法.它们都是以数组的语法处理二进制数据,所以统称为二进制数组. 这个接口的原始设计目的,与 WebGL 项目有关.所谓 WebGL,就是指浏览器与显卡之间的通信接口,为了满足 JavaScript 与显卡之间大量的.实时的

public class ScreenShot { // 获取指定Activity的截屏,保存到png文件 public static Bitmap takeScreenShot(Activity activity) { // View是你需要截图的View View view = activity.getWindow().getDecorView(); view.setDrawingCacheEnabled(true); view.buildDrawingCache(); Bitmap b1

转载自 : http://blog.csdn.net/gengqiquan/article/details/65938021 领导最近觉得携程的截屏生成长图分享效果比较好,所以我们也加了个:产品觉得分享出去的长图需要加公司品牌水印,于是我们也加了个:嗯,事件起因就是这样. 长图一般是ScrollView和ListView. 我们需要取得这两个控件的完整显示的图片.原理很简单,搞一张和控件长宽一致的画布(就是创建一个高宽相等的bitmap).然后调用控件的draw方法把自己画到画布上去. 分别贴出

类型化数组是JavaScript操作二进制数据的一个接口. 这要从WebGL项目的诞生说起,所谓WebGL,就是指浏览器与显卡之间的通信接口,为了满足JavaScript与显卡之间大量的.实时的数据交换,它们之间的数据通信必须是二进制的,而不能是传统的文本格式. 比如,以文本格式传递一个32位整数,两端的JavaScript脚本与显卡都要进行格式转化,将非常耗时.这时要是存在一种机制,可以像C语言那样,直接操作字节,然后将4个字节的32位整数,以二进制形式原封不动地送入显卡,脚本的性能就会大幅提