今天在项目中遇到一个需求是将生成的二维码和一些背景作为海报，然后将海报以图片的形式下载 使用了 html2canvas 插件 import html2canvas from "html2canvas"; <div class="tc" v-for="(item,index) in qrcodeLis ...
分类：
Web程序 时间：
2020-01-20 22:29:23
阅读次数：
113
文章首发于个人博客：http://heavenru.com 在最近项目中需要实现一个精灵动画，素材方只提供了一个短视频素材，所以在实现精灵动画之前先介绍两个工具来帮助我们更好的实现需求。在这篇文章中，主要是介绍两个命令行工具来实现将一个短视频文件转化成一张 sprite 图片与如何使用 canvas ...
分类：
其他好文 时间：
2020-01-20 14:46:45
阅读次数：
95
按钮（button）可能是网页中最常见的组件之一了，大部分都平淡无奇，如果你碰到的是一个这样的按钮，会不会忍不住多点几次呢 通常这类效果第一反应可能就是借助canvas了，比如下面这个案例点击预览（建议去codepen原链接点击预览访问，segmentfault内置的预览js会加载失败） 效果就更加 ...
分类：
其他好文 时间：
2020-01-20 12:55:39
阅读次数：
74
最近试着用canvas元素的2d绘图函数做了一个弧线形的时钟。 直接上代码： createClock("#myclock",0,0.5); function createClock(selector,n,p_r){ var weeks =["Sun","Mon","Tue","Wed","Thu", ...
分类：
其他好文 时间：
2020-01-19 22:15:52
阅读次数：
105
语义化标签 input的新属性值 表单的验证 json的新方法 自定义属性 拖放 canvas 地理位置的获取 离线存储 本地存储 audio video 语义化标签 使用最多的id->当前的语义化标签页面整体架构header标签 页面头部或者板块的头部footer标签 页面底部或者板块的底部nav ...
分类：
Web程序 时间：
2020-01-18 19:34:33
阅读次数：
122
上周需要做一个把页面左侧列表内容拖拽到右侧区域，并且绘制成关系树的功能。看了设计图，第一反应是用canvas绘制关系线。吭哧吭哧搞定这个功能后，发现用canvas绘图，有一个很严重的缺陷。那就是如果左侧关系特别多，需要绘制成百上千条时，而canvas画布的宽高在写dom的时候就已声明。关系很多的情况 ...
分类：
其他好文 时间：
2020-01-18 12:44:40
阅读次数：
258
本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按网页保存为截图。 这里有个栗子（请用微信打开，长按图片即可保存）：3分钟探索你的知识边界 将整个网页保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中调研和踩坑的一些小结和汇总。 一、实现HTML网页保存为图片 1 ...
分类：
Web程序 时间：
2020-01-18 00:50:25
阅读次数：
108
尤雨溪网站三角彩带效果 效果： 源码 技巧点 1. 为了适应不同物理大小及缩放比例屏幕, 保证像素一致性: 画布大小 = innerWidth devicePixelRatio canvas缩放变换 x.scale(devicePixelRatio, devicePixelRatio) 2. 颜色区 ...
分类：
Web程序 时间：
2020-01-17 23:14:32
阅读次数：
109
在大佬哪里嫖来了文件，在本地打开只有人物 旁边的栏目和头顶的文字框都不能用，所以我给隐藏了 不知道是为什么 可能我是个菜鸡吧 点文件下载即可 下载链接 http://yk1981268324.gz01.bdysite.com/index3.html 把以下代码补全，放在下载文件同文件夹 希望有大佬指 ...
分类：
Web程序 时间：
2020-01-17 13:49:46
阅读次数：
587
ImageData 对象 ImageData对象中存储着canvas对象真实的像素数据，它包含以下几个只读属性： width data属性返回一个 Uint8ClampedArray，它可以被使用作为查看初始像素数据。每个像素用4个1bytes值(按照红，绿，蓝和透明值的顺序; 这就是"RGBA"格 ...
分类：
编程语言 时间：
2020-01-16 10:39:55
阅读次数：
101
