用wxDraw.js制作酷炫的小程序canvas动画『wxDraw 小程序界的zrender』
wxDraw
轻量的小程序canvas动画库
github
文档
是什么
canvas 是HTML5的一个重要元素,它能够高效的绘制图形,但是过于底层,且粗糙的Api,导致开发者很难使用它来做较为复杂的图形, 而且它的即时绘制无记忆特性,使得它内部的图形并不支持动画更不支持一切交互事件。
这样的问题出现在所有支持canvas的客户端上同样出现在 微信小程序中的canvas中, 由于小程序由jscore支持,并没有window对象,并且canvas的Api与标准的canvas的Api有所出入,所以市面上绝大部分canvas库与它无缘。
而wxDraw也就应运而生,专门用于处理小程序上canvas的图形创建、图形动画以及交互问题的。
特性
- 简单 不需要你会canvas,会用jQuery就会使用wxDraw。
- 灵活 所有图形,随时随地都可以进行属性修改、图形添加以及图形销毁。
- 事件支持 小程序支持的事件只要是合理的都支持。
- 缓动动画支持 wxDraw支持链式调用动画『就像jQuery的animate一样』,并且支持几乎所有的缓动函数
图形创建
支持图形
这些图形都可以在演示文件里看到 点这里
rect
var rect = new Shape('rect', {x: 60, y: 60, w: 40, h: 40, fillStyle: "#2FB8AC", rotate: Math.PI/2 },'mix', true);复制代码
circle
let circle = new Shape('circle', { x: 100, y: 100, r: 40, sA: Math.PI/4, fillStyle: "#C0D860",strokeStyle: "#CC333F", rotate: 20, lineWidth: 0, needGra: 'line', gra: [[0, '#00A0B0'], [0.2, '#6A4A3C'], [0.4, '#CC333F'], [0.6, '#EB6841'], [1, '#EDC951']]}, 'fill', true)复制代码
polygon
let polygon = new Shape('polygon', { x: 200, y: 200, r: 40, sides: 9, //9边形fillStyle: "#FC354C", rotate: Math.PI / 4 }, 'mix', true)复制代码
ellipse
let ellipse = new Shape('ellipse', { x: 200, y: 200, a: 40, b: 100, fillStyle: "#00A0B0", rotate: Math.PI / 7 }, 'mix', true)复制代码
cshape 「自定义图形」
let cshape = new Shape('cshape', {rotate: Math.PI / 2,points: [[70, 85], [40, 20], [24, 46], [2, 4], [14, 6], [4, 46]],lineWidth: 5,fillStyle: "#00A0B0",rotate: Math.PI / 7,needGra: 'circle',smooth:false,gra: [[0, '#00A0B0'], [0.2, '#6A4A3C'], [0.4, '#CC333F'], [0.6, '#EB6841'], [1, '#EDC951']]}, 'fill', true)复制代码
line
let line = new Shape('line', { points:[[240,373],[11,32],[28,423],[12,105],[203,41],[128,0.06]], strokeStyle: "#2FB8AC",lineWidth:1, rotate: 0, needShadow: true,smooth:false }, 'fill', true)复制代码
text
let text = new Shape('text', { x: 200, y: 200, text: "我是测试文字", fillStyle: "#E6781E", rotate: Math.PI / 3}'fill', true)复制代码
wxDraw创作的动画演示
这些动画都可以在演示文件里看到 点这里
贪吃蛇
logo演绎
rect舞蹈
吃豆人
wxDraw事件
这些事件都可以在演示文件里看到 点这里
支持
- tap
- touchStart
- touchEnd
- touchMove
- longPress
- drag「自定义的事件」
事件演示
旁边UI小妹妹亲自示范 ?
第一视角
是不是特别简单,特别方便!!!
来,老铁们!star 走一波!!!
如果你觉得这个库还不错 对你有帮助 那给作者买一个鸡腿吧「最近健身 需要补这个」
详细文档还请关注
github
文档
转载于:https://juejin.im/post/59f74c7ef265da432840253d
用wxDraw.js制作酷炫的小程序canvas动画『wxDraw 小程序界的zrender』相关推荐
- 短视频app源码出售swiper.js制作酷炫轮播图
html <html lang="en"><head><meta charset="utf-8"><title> ...
- HTML+CSS+JS实现 ❤️酷炫HUD科幻数据屏幕动画界面❤️
- css svg做动图,用SVG制作酷炫动态图标的方法
用SVG制作酷炫动态图标的方法 发布时间:2020-09-14 14:56:39 来源:亿速云 阅读:160 作者:小新 用SVG制作酷炫动态图标的方法?这个问题可能是我们日常学习或工作经常见到的.希 ...
- opencv极坐标转换成直角坐标_媲美 PS,用 Python 制作酷炫极坐标全景图
点击上方"Python数据之道",选择"星标公众号" 收藏文章的同时,不要忘记「在看」 媲美 PS, 用 Python 制作酷炫极坐标全景图 0 概述 今天要 ...
- html5 怎么写动态图形设计,如何用SVG制作酷炫动态图标?(代码实例)
本章给大家介绍在html5中如何用SVG制作酷炫动态图标?(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.基本图形元素 svg有一些预定义的形状元素:矩形,圆形,椭圆 ...
- 如何制作抖音卡点视频,使用预设制作酷炫转场
如何制作抖音卡点视频 1.首先你应该先找到一段音频.然后不要点击音频进行卡点.卡点的快捷键是m.这个卡点是在上面进行显示的.然后把你准备好的视频按住shift键,然后那些视频就会放在你的标记点上了.但 ...
- Python 图像 一样大小_媲美 PS,用 Python 制作酷炫极坐标全景图
点击上方"Python数据之道",选择"星标公众号" 收藏文章的同时,不要忘记「在看」 媲美 PS, 用 Python 制作酷炫极坐标全景图 0 概述 今天要 ...
- 使用Python制作酷炫二维码(myqr)
使用Python制作酷炫二维码 本篇参考自微信公众号,二三四张图片有改博主知乎的链接哦,https://mp.weixin.qq.com/s/Fq6_KKeN5T28DbfyDsGYDw 平时你见到的 ...
- Vue.js 打造酷炫的可视化数据大屏
可视化技术与 Vue 介绍 实验介绍 在本节实验中,将对可视化技术的应用场景.发展历程进行介绍,让大家对可视化技术有一个基础的概念.随后将介绍如今流行的可视化框架与其之间的优缺点对比.最后介绍 Vue ...
- Python制作酷炫的动画效果
1 引言 利用Python的Matplotlib-Animation库可以制作酷炫的数学公式动画,官方教程可访问链接. 本文为了清晰说明如何利用Animation类来实现动画效果,这里采用介绍一个点沿 ...
最新文章
- 神策 2019 数据驱动大会「 PPT 下载」,零距离感受大会精华
- 算法 --- 判断某个值是否在二叉搜索树中
- grunt入门 出处:http://artwl.cnblogs.com
- C++对象数组与对象指针
- mysql子查询查询子字段_MySQL知识整理7.4—子查询
- csv格式清洗与转换python123,Python Pandas 清理错误格式数据
- 【华为云技术分享】程序员实用JDK小工具归纳
- 详解 :Spring Boot 最核心的 3 个注解
- java项目异常处理视频_异常的抛出和处理_JavaSE系列视频课程之异常处理(四)_Java视频-51CTO学院...
- 数学建模论文写作——框架和要点
- 智慧消防技术在安全管理中的应用与研究
- 核定征收的个体户,年营业额不超过120万,还需要缴纳个税吗?
- Ubuntu 16.04与Win10双系统双硬盘安装图解
- Python基础+进阶(万字总结,基础案例+执行结果)
- SCI英文论文写作- Latex 进阶
- 女生双修计算机科学与技术,浙江大学计算机科学与技术学院数字媒体技术专业毕业作品展...
- 贝壳ip连接服务器没响应,贝壳物联通讯协议TCP连接测试教程
- react 逆地理 高德地图_react中使用高德地图的原生API
- “打工人”都在用的邮件使用规范
- [转载]软件常见的各种版本英文缩写