三:Canvas的绘图(下) 1. 在画布上的合成 合成是指如何精细控制画布上对象的透明度和分层效果。有两个属性可以控制合成操作: globalAlpha globalAlpha Canvas属性用来表示透明度,它的默认值为1.0(完全不透明),并且可以设置从0.0到1.0的值,这项Canvas属性 ...
分类:
Web程序 时间:
2020-05-01 01:33:37
阅读次数:
87
引言: 近期,工作中发现,有些前端小伙伴很少接触到二进制数据,所以将项目中二进制数据的应用和大家分享一下,适合入门了解,高手慎入,欢迎拍砖。项目背景: 基于公司原有图形处理的二进制数据文件(公司自定义的二进制数据格式),实现Canvas绘图。 话说:项目开始的时候我也是一脸懵逼,这么多技术难点需要攻 ...
分类:
其他好文 时间:
2020-04-30 15:11:23
阅读次数:
70
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以打开原始页面。 纯 css 写的滑块控件https://codepen.io/thebabydin... 用 canvas 写的蜂巢动画https://codepen.io/towc/pen/z... 用 canvas 写的彗星风格的拖尾动画 ...
分类:
其他好文 时间:
2020-04-30 13:50:55
阅读次数:
60
添加水印的思路 1. 通过动态添加水印的 ,平铺在页面上,给 的`point event none`,添加一个透明度就可以了,这种实现比较简单,但是效果可能不是很好。 2. 通过 绘制对应的水印图形以及文字,然后转成 编码的地址,附加在需要添加水印的页面的根元素上,作为背景图。 第二种思路的实现如下 ...
分类:
Web程序 时间:
2020-04-30 11:14:06
阅读次数:
228
有了canvas之后,我们可以很容易地创建一个简单图标,不需要任何插件,不过,有的小伙伴觉得它很难,笔者仔细思考一番之后,只能吐嘈一下他们的绘图技能...于是在开始绘制之前,我们首先画一下草图~ 讲解之前,先贡献出源码:https://github.com/Sue1024/Ca... Make It ...
分类:
Web程序 时间:
2020-04-29 14:50:03
阅读次数:
78
本期重在编程思想分享,代码仅供参考,要根据自己的需求来写。 本文主要讲用户拒绝授权后的逻辑处理;用canvas制作海报需要画出用户头像,点击“生成海报”用户明明同意授权了,可是不显示该怎么办。 我说一个场景: 这里有两个页面A和B,A点一下能调转到B。 A是一个获取用户信息的按钮,点一下就一个逻辑: ...
分类:
微信 时间:
2020-04-28 17:21:41
阅读次数:
109
使用Canvas + exif-js自动修正数码照片 使用场景,在做朋友圈 H5 时,时常遇到需要用户拍照上传图片需求,但是在一些手机(iso)上拍出来的照片会出现奇怪的旋转角度来呈现。经过各种百度才发现相机拍出来的图片拥有很多属性,其中一项是Orientation ,用于记录拍摄时相机物理旋转角度 ...
分类:
其他好文 时间:
2020-04-28 15:02:20
阅读次数:
85
企查查登陆验证使用的阿里系的滑动验证码,主要检查的是 内置属性、鼠标在页面中的事件、浏览器可见性中的宽高(canvas绘制)、滑动过程中坐标轴的变化等信息。 使用puppeteer能很好的模拟页面中的事件,但是在进行测试企查查登陆时,需要浏览器的可见性,而且与分辨率也有一定的关系,需要设置浏览器和系 ...
分类:
其他好文 时间:
2020-04-28 00:18:52
阅读次数:
204
getImageData:获取一张图片的像素数据cxt.getImageData( x, y, width, height )x:图片所在的x坐标y: 图片所在的y坐标width,height 要获取的像素区域返回值是一个对象,对象包括一个data属性, 宽度,高度. data属性是一个巨大的数组, ...
分类:
Web程序 时间:
2020-04-27 19:09:26
阅读次数:
74
前言 (最近设计模式看的有点头大,一直面对纯js实在是有些枯燥-_-。所以写一点有趣的东西调剂一下)现在canvas已经不算新鲜了,不过由于日常业务中并不常用,所以实践并不多,今天分享一下,如何实现简单canvas迷宫。这个例子来源于《html5秘籍》第二版,代码有稍微做了点调整。 由于中间有一步使 ...
分类:
其他好文 时间:
2020-04-27 15:21:22
阅读次数:
64