js证书批量生成与打包下载

前边有提到最近的一个证书生成保存下载打印的需求。 之前实现的是一个单个操作的页面,现在把实现的批量效果和进度效果的代码展示出来。 html css js 以上是三种实现方案,第一种需要一个接口,后两种不需要接口,直接前端生成。 说一下中间遇到的问题: 1.进度条里边的文字显示不出来: 用的是layu ... »

Android项目刮刮奖详解扩展篇——开源刮刮奖View的制作

前言 我们已经成功实现了刮刮奖的功能了,本期是扩展篇,我们把这个View直接定义成开源控件,发布到JitPack上,以后有需要也可以直接使用,关于自定义控件的知识,不了解的同学可以看这下面我之前写的这两篇 "Android 自定义控件" "Android开发——发布第三方库到JitPack上" 实现 ... »

Android项目刮刮奖详解(四)

"Android项目刮刮奖详解(三)" 前言 上一期我们已经是完成了刮刮卡的基本功能,本期就是给我们的项目增加个功能以及美化一番 目标 + 增加功能 用户刮卡刮到一定程度的时候,清除遮盖层 + 在遮盖层放张图片,增加用户体验 + 增加一个刮完奖回调监听 实现 1.自动消除效果 我们首先来了解一下bi ... »

Android项目刮刮奖详解(三)

"Android项目刮刮奖详解(二)" 前言 上一期我们已经实现了一个简易的刮刮卡功能,这一期我们来将其完善一下 目标 + 将刮刮奖的宽高改为合适高度 + 将刮刮奖位置居中 + 将信息层的图片换成文字(重点) 实现 1. 将刮刮奖的宽高改为合适高度和将刮刮奖位置居中 这里其实很简单,我们直接到lay ... »

Android项目刮刮奖详解(二)

"Android项目刮刮奖详解(一)" 前言 上期我们简单地实现了一个画板的功能,用户可以在上面乱写乱画,其实,刮刮奖也是如此,用户刮奖的时候也是乱写乱画的。 刮刮奖原理 一共有两层画布,底层画布存放中奖信息的图片,上层画布则是一个遮盖层,我们将底层画布成为信息层,上层画布称作为遮盖层。 用户再遮盖 ... »

Android项目刮刮奖详解(一)

前言 最近正在学鸿洋大大的刮刮奖,感觉学有所得,便是来写篇详解(尽管网上有很多了,不过毕竟是自己写的,自己以后方便复习),正文开始 目标 实现画板功能 思路 我们需要自定义View来实现画板功能,之后再将其稍微改造即可。 关于自定义View,如果没有了解的同学建议先去了解一下,百度自定义View就会 ... »

html2canvas关于图片不能正常截取

问题 ====== 首先说说遇到了什么问题。首先有这么一个需求。需要前端根据后端传过来数据,动态的生成图片。图片中的文案、背景图片、用户头像全部都是通过后端的接口获取。但是使用 "html2canvas" 生成的canvas有些图片成功的在canvas里生成了。但是有些图片无论如何都显示不出来。 官 ... »

使用 html2canvas 实现浏览器截图

基于上一篇《h5 本地上传图片预览 源码下载》,今天分享一个图片上传后, 根据所上传的图片颜值随机生成一个答案, 并且可以生成一张专属于自己的名片。 首先上传预览我们已经实现了, 所以接下来我们只需要实现浏览器截图功能就可以了。 目前最流行的应该是 html2canvas.js 了, 很多微信里面测 ... »

canvas三角函数模拟水波效果

Md2All export document 最近项目中,ui设计了个水波效果的背景动画,然而并没有gif或svg动画,开始试着用css实现了一下,动画效果并不是很好,网上查了下基本都是用贝赛尔曲线实现,想起以看的各种前波形图,于是想着用三角函数图像初略模拟一下 示例效果如下: 一、绘制sin函数图 ... »

使用着色器在WebGL3D场景中呈现行星表面地形

实验目的:按照一定规律生成类地行星地表地形区块,并用合理的方式将地形块显示出来 涉及知识:Babylon.js引擎应用、着色器编程、正态分布、数据处理、canvas像素操作 github地址:https://github.com/ljzc002/ljzc002.github.io/tree/mast ... »

canvas学习笔记(一)

canvas是HTML5的新元素之一。使用canvas可以直接在HTML上进行图形操作,所以它具有极大的应用价值。canvas元素本身不具有绘图能力,它需要借助JavaScript来实现绘图功能。 canvas的限制: canvas绘制的图形是静态的,如果要让所画的图形动起来,则需要画出每一帧的图形 ... »

原生js之canvas时钟组件

canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片、比如刮刮卡、比如制作海报、图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制。 定义:canvas元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成,canvas标签只是图形... ... »

粒子系统(二):Canvas绘制精美图案

准备 IDE:Visual Studio Code Language:JavaScript / ECMAScript 6+ GitHub:Natural2D.JS 本文主要讲述 Particles - Walker 示例的实现步骤,不涉及具体的代码细节。 第一节 粒子概述 粒子是粒子系统最基本的组成 ... »

使用JavaScript实现一个俄罗斯方块

清明假期期间,闲的无聊,就做了一个小游戏玩玩,目前游戏逻辑上暂未发现bug,只不过样子稍微丑了一些-.-项目地址:https://github.com/Jiasm/tetris在线Demo:http://blog.jiasm.org/tetris/?width=16&height=40 (修改URL ... »

基于 HTML5 Canvas 实现的文字动画特效

文字是网页中最基本的元素,一般我们在网页上都是展示的静态文字,但是就效果来说,还是比较枯燥的。文字淡入淡出的动画效果在项目中非常实用,如果有某些关键的文字,可以通过这种动态的效果来提醒用户阅读。 ... »

canvas填充样式

填充样式主要针对fillStyle。fillStyle除了可以赋值为color,还可以赋值渐变色,包括线性渐变色和径向渐变色,还是和css3里的内容类似。 一、线性渐变 1、设置线性渐变的填充样式 设置线性渐变的填充样式需要2步骤 1、设置渐变线段 通过2个坐标确定渐变线段,来定义渐变的方向和尺度。 ... »

WEB烟花效果——Canvas实现

本文主要介绍一种WEB形式的烟花(fireworks)效果,该效果基于Canvas实现,巧妙地运用了canvas绘图的特性,并加入了物理力作用的模拟,使整体效果非常绚丽、逼真。本文从本质上介绍了其实现原理,便于其他可视化爱好者能快速上手。本文从视觉渲染和运动轨迹模拟两个方面详细描述了该效果的实现原理... ... »

canvas 星空和图形变换

图形变换。 一、画一片星空 先画一片canvas.width宽canvas.height高的黑色星空,再画200个随机位置,随机大小,随机旋转角度的星星。 window.onload=function(){ var canvas=document.getElementById("canvas"); ... »

canvas线条的属性

一、线条的帽子lineCap 取值:butt(默认值),round圆头,square方头 var canvas=document.getElementById("canvas"); canvas.width=800; canvas.height=800; var context=canvas.get ... »