每个小程序成型后,一般都会选择生成带菊花码的海报分享出去来吸引更多的流量。下面来介绍下其他的一种实现方式吧 原理:主要利用微信小程序强大的Canvas API来合成,生成后可用wx.canvasToTempFilePath()导出图片地址,从而可实现预览及保存至手机相册 一、如何使用 打开项目文件夹 ...
分类:
微信 时间:
2020-06-04 20:02:09
阅读次数:
119
之前在一个移动端的抽奖页面中,在抽奖结果的展示窗口需要弹幕轮播显示,之前踩过一些小坑,现在总结一下前端弹幕效果的实现方式。 css3实现乞丐版的弹幕 css3弹幕性能优化 canvas实现弹幕 canva弹幕的扩展功能 本文原文地址在我的博客主页:原文地址 1. css3实现乞丐版的弹幕 (1)如何 ...
分类:
Web程序 时间:
2020-06-02 11:38:27
阅读次数:
70
1,cover-image用法 覆盖在原生组件之上的图片视图。可覆盖的原生组件同cover-view,支持嵌套在cover-view里 2,cover-view用法 覆盖在原生组件之上的文本视图。 可覆盖的原生组件包括 map、video、canvas、camera、live-player、live ...
分类:
微信 时间:
2020-06-02 10:59:43
阅读次数:
98
前言:canvas是HTML5出来的绘图API容器,对于图形的处理非常强大,下面使用canvas配合JavaScript来做一下动态画圆效果。可以用它来做圆形进度条来使用。arc()实现画圆通过设置的开始角度和结束角度来做限定,然后通过累加临时的角度变量实现动画效果。相关函数: context.ar ...
分类:
其他好文 时间:
2020-06-01 00:42:36
阅读次数:
80
var dataURL; html2canvas(document.querySelector(".poster_template_con"),{useCORS:true,logging:true}).then(canvas => { document.body.appendChild(canvas ...
分类:
Web程序 时间:
2020-05-31 18:20:41
阅读次数:
116
最近接手了一个小型的H5,最主要的功能大概就是拍照上传和canvas画板了。 主要是记录一下自己菜到像傻子一样的技术。 1、canvas画板隔空打牛!画布越往上部分错位距离越小,越往下距离越大。 2、图片上传!白板涂鸦的内容是以base64的形式传给后端工程师的,图片上传的图片是路径,后端要求统一格 ...
分类:
其他好文 时间:
2020-05-31 00:50:23
阅读次数:
71
4.x版本有如下特性: 1. 模块化 不再是一个整体,而是分为多个模块,可以按需加载,例如: d3-selection 选择器d3-shape 图形d3-array 数组d3-force 力导向图d3-zoom 缩放 2. 支持canvas 3. 命名精简和更语义化 布局省去layout,生成器省去 ...
分类:
其他好文 时间:
2020-05-30 15:35:31
阅读次数:
244
如今,HTML5 可谓如众星捧月一般,受到许多业内巨头的青睐。很多Web开发者也尝试着用 HTML 5 来制作各种各样的富 Web 应用。HTML 5 规范引进了很多新特性,其中之一就是 Canvas 元素。HTML 5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大。今天 ...
分类:
Web程序 时间:
2020-05-29 21:07:23
阅读次数:
82
HTML5 拥有众多引人注目的新特性,如 Canvas、本地存储、多媒体编程接口、WebSocket 等等。其中,WebSocket 的出现使得浏览器提供对 Socket 的支持成为可能,从而在浏览器和服务器之间提供了一个基于 TCP 连接的双向通道。使用 WebSocket,web开发人员可以很方 ...
分类:
Web程序 时间:
2020-05-29 19:13:40
阅读次数:
65
HTML5中的2D图形绘制技术 Canvas和SVG是HTML5中主要的2D图形技术,前者提供画布标签和绘制API,后者是一整套独立的矢量图形语言,成为W3C标准已经有十多年(2003.1至今),总的来说,Canvas技术较新,从很小众发展到广泛接受,注重栅格图像处理,SVG则历史悠久,很早就成为国 ...
分类:
Web程序 时间:
2020-05-29 12:09:33
阅读次数:
96