canvas
文章平均质量分 51
帆酱
这个作者很懒,什么都没留下…
展开
-
H5 canvas的使用(二):移动端手势密码
线上demo:https://my.weblf.cn/xly/demo/canvas/hand.html代码:<!DOCTYPE html><html><head lang="en"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, us...原创 2019-11-30 23:19:47 · 558 阅读 · 0 评论 -
H5 jq+canvas实现pc写字板功能
如果本文帮助到你,本人不胜荣幸,如果浪费了你的时间,本人深感抱歉。如果有什么错误,请一定指出,以免误导大家、也误导我。线上demo1:点击查看线上demo2:点击查看实现此功能需掌握一些基本的canvas语法。demo1代码:<!DOCTYPE html><html><head> <meta charset="UTF-8...原创 2019-11-02 15:13:07 · 823 阅读 · 0 评论 -
vue使用domtoimage实现移动端H5页面截图
dom-to-image是一个可以将任意DOM节点转换为用JavaScript编写的矢量(SVG)或光栅(PNG或JPEG)图像的库。 它基于Paul Bakaus的domvas并且已被完全重写,修复了一些错误并添加了一些新功能(如Web字体和图像支持)。github:点击查看线上demo:点击查看npm安装和引用npm install dom-to-imageimport ...原创 2019-10-31 12:28:46 · 4582 阅读 · 1 评论 -
vue使用html2canvas实现移动端H5页面截图
html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现。它不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建。点击查看:官方文档点击查看:线上demo安装引用html2canvasnpm install html2canvasimport...原创 2019-10-31 12:16:24 · 2076 阅读 · 4 评论 -
canvas使用two.js模拟小程序首页气泡效果
使用canvas框架two.js模拟微信小程序首页气泡动画线上demo:https://my.weblf.cn/xly/demo/twojs/wx_developer_twojs.html直接上代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...原创 2018-06-27 17:54:22 · 1183 阅读 · 0 评论 -
使用jquery-circle-progress绘制canvas渐变环形进度条
本文介绍如何使用jquery-circle-progress绘制canvas渐变环形进度条。先引入文件:<script src="jquery-1.11.0.min.js"></script><script src="circle-progress.js"></script>再创建html元素:<div id="circl...原创 2018-07-03 16:36:57 · 6088 阅读 · 0 评论 -
H5 canvas的使用(一)
Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表、动画等。没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Flash进行交互。有了Canvas,我们就再也不需要Flash了,直接使用JavaScript完成绘制。在绘制canvas前,要先定义一个矩形框,如果你的浏览器不支持canvas标签,则标签内的...原创 2018-07-06 17:52:39 · 10454 阅读 · 0 评论