WeZRender入门基础教程_微信小程序Canvas开发

WeZRender入门基础教程

GitHub:https://github.com/guyoung/WeZRender

WeZRender入门基础教程_微信小程序Canvas开发

简介描述:微信小程序Canvas开发

WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender。  

使用

WXML:

<canvas style="width: 375px; height: 600px;" canvas-id="line-canvas-1">canvas>

JS:

var wezrender = require('../../lib/wezrender');
zr = wezrender.zrender.init("line-canvas-1", 375, 600);

特性

数据驱动

利用WeZRender绘图,只需定义图形数据。

内置多种图形元素(圆形、椭圆、圆环、扇形、矩形、多边形、直线、曲线、心形、水滴、玫瑰线、Trochoid、文字、图片等),统一且丰富的图形属性充分满足个性化需求。

强大的动画支持

提供promise式的动画接口和常用缓动函数,轻松实现各种动画需求。

易于扩展

分而治之的图形定义策略允许扩展图形元素。

海计划公众号
(0)
上一篇 2020/03/11 01:29
下一篇 2020/03/11 01:29

您可能感兴趣的内容

  • 启迷网使用帮助_一个分享实用技巧,挖掘产品价值的网站

    启迷网使用帮助 官方网址:http://www.iqimi.com/ 简介描述:一个分享实用技巧,挖掘产品价值的网站 一个写手机测评得积分换取现金。你可以给华为,VIVO,小米,小…

    2020/03/06
  • Js将十进制转换为十六进制?攻略教程_进制菜鸟教程

    JavaScript中有很多内置函数可以帮我们进行数(进)制转换。那么给定一个十进制数字,如何将数字从十进制转换为十六进制?下面本篇文章就来给大家介绍一个使用JavaScript将十进制转换为十六进制的方法 。想要使用JavaScript将十进制转换为十六进制,可以通过使用toString()方法来完成。该方法接受转换进制基数的参数,这种情况下基数是16。语

    2020/03/26
  • google protobuf 数据类型小白攻略理解Protobuf数据格式解析_数据小白攻略

    什么是protobuf?Protobuf是Google开源的一款类似于Json,XML数据交换格式,其内部数据是纯二进制格式,不依赖于语言和平台,具有简单,数据量小,快速等优点。目前用于序列化与反序列化官方支持的语言有C++,C#, GO, JAVA, PYTHON。适用于大小在1M以内的数据,因为像在移动设备平台,内存是很珍贵。protobuf格式的特点1

    2020/04/03
  • react生命周期详解小白基础深入理解React生命周期_react小白指南

    React主要思想是通过构建可复用组件来构建用户界面。所谓组件就是有限状态机。通过状态渲染对应的界面,且每个组件都有自己的生命周期,它规定了组件的状态和方法需要在哪个阶段改变和执行。有限状态机,表示有限个状态以及在这些状态之间的转移和动作行为的模型。一般通过状态,事件,转换和动作来描述有限状态机。React正是利用这一概念,通过管理状态来实现对组件的管理。初

    2020/04/05
  • 阻止移动端浏览器点击图片会预览的几种方法小白教程_移动端零基础入门

    在移动端部分浏览器中点击了图片,变成了查看图片的效果,怎么防止img的图片被手机浏览器的图片查看器打开呢?下面整理了一些方法来实现。1、1.在img元素上添加 onclick=”return false”2、背景图的方式插入(这种是比较普遍的方式)backgr

    2020/04/05
  • JS如何提高扩展运算符的性能?基础指南_性能攻略教程

    在这篇文章中,我们会进行一个有趣的测试,看看我们如何提高扩展运算符的性能。让我们首先简要介绍一下扩展运算符在数组中的工作原理。扩展运算符,也就是我们常用的三个,让数组展开变成每个小块。 然后使用中括号语法[],重新组装这些小块构造一个新数组。扩展运算符可以被放置在中括号[]里面的任何位置。const numbers = [1, 2, 3];
    [0, …n

    2020/03/24
  • WebJars入门教程_将web前端资源(如jQuery &amp; Bootstrap)打成jar包文件

    WebJars入门教程 官方网址:https://www.webjars.org/ 简介描述:将web前端资源(如jQuery &amp; Bootstrap)打成jar包…

    2020/03/11
  • webRTC API之RTCPeerConnection使用指南_WebRTC入门基础

    RTCPeerConnection API是每个浏览器之间点对点连接的核心,RTCPeerConnection是WebRTC组件,用于处理对等体之间流数据的稳定和有效通信。RTCPeerConnection可以保护Web开发人员免受潜伏在其中的无数复杂性的影响。WebRTC使用的编解码器和协议可以进行大量工作,即使在不可靠的网络上也可以进行实时通信:丢包隐藏

    2020/03/26
  • ied入门知识_Node的另一个包管理器

    ied入门知识 官方网址:http://alexandergugel.github.io/ied GitHub:https://github.com/alexanderGugel/…

    2020/03/06
  • img.top入门知识_智能在线图片压缩

    img.top入门知识 官方网址:https://img.top/ 简介描述:智能在线图片压缩 为图像体积瘦身,让你的图片加载飞快!  极致的压缩效果 使用聪明的有损压缩…

    2020/03/10
  • 物联网项目选择JavaScript的5大理由菜鸟教程下载_项目攻略教程

    物联网项目选择JavaScript的5大理由菜鸟教程下载 在一个以数字化为主导的世界中,物联网(IoT)在改变我们的生活和开展业务方式方面发挥着至关重要的作用。从智能生活到工作场所…

    2020/03/19
  • js “指针”:数组转树攻略教程_树基础入门

    当变量指向一个对象的时候,实际指向的是存储地址,测试: a = {val: 123}b = ab.val = 321console.log(a)// 结果:{val: 321}数组转树的方式: arr = [{id: 1, name: ‘节点1’, pid: 0},{id: 2, name: ‘节点2’, pid: 1},{id: 3, name

    2020/03/31
  • webpack 图片路径问题小白知识_图片基础入门

    今天在学 webpack 时碰到一个问题,就是 webpack 通过插件 file-loader 打包图片后,在最终的 html 文件中图片地址是不对的,只有图片名称是对的,相信应该也有很多和我一样的初学者掉坑了。解决方法:在 webpack.config.js 的配置文件中添加一个属性{test: /\.(png|svg|jpg)$/,use: [{loa

    2020/03/20
  • 前端性能优化之重排和重绘入门攻略_优化零基础入门

    来源:https://segmentfault.com/a/1190000016990089作者:Parkeeers前言,最近利用碎片时间拜读了一下尼古拉斯的另一巨作《高性能JavaScript》,今天写的文章从“老生常谈”的页面重绘和重排入手,去探究这两个概念在页面性能提升上的作用。一.重排 & 重绘有经验的大佬对这个概念一定不会陌生,“浏览器输入URL发

    2020/04/03
  • 操作系统和Web服务器那点事儿入门基础教程_服务器基础指南

    操作系统老大又一个进程启动了,操作系统老大叹了一口气,毕竟自己的肩头又多了一份责任。让人烦恼的是,新来的家伙们很无知,几乎就是一张白纸。有些老实本分的会按照自己的规矩来做事,有些刺头儿喜欢问这问那,时不时还想搞点非法的访问,想访问别的进程的地址空间,甚至想访问内核的代码和数据! 这时候,我只有把他kill掉祭天,留下一个core dump的尸体让码农们去分析

    2020/04/05
  • Zebkit小白攻略_基于HTML5 Canvas 的UI框架

    Zebkit小白攻略 GitHub:https://github.com/barmalei/zebkit 简介描述:基于HTML5 Canvas 的UI框架 遵循简单OOP概念的J…

    2020/03/07