原创内容，转载请注明原文网址：http://homeqin.cn/a/wenzhangboke/jishutiandi/weixinkaifa/2019/0104/308.html

微信小程序Canvas增强组件WeZRender

基于HTML5 Canvas类库ZRender。

使用

WXML：

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

var wezrender = require('../../lib/wezrender');

zr = wezrender.zrender.init("line-canvas-1", 375, 600);

特性

数据驱动

利用WeZRender绘图，只需定义App开发培训图形数据。

var circle = new wezrender.graphic.shape.Circle(      

    shape: {

        cx: 50,

        cy: 50,

        r: 50

    },

    style: {

        fill: 'red',

        lineWidth: 10

    }

});

丰富的图形选项

内置多种图形元素（圆形、椭圆、圆环、扇形、矩形、多边形、直线、曲线、心形、水滴、玫瑰线、Trochoid、文字、图片等），统一且丰富的图形属性充分满足个性化常州网站开发培训需求。

var droplet = new wezrender.graphic.shape.Droplet({

    shape: {

        cx: 200,

        cy: 300,

        width: 50,

        height: 50

    },

    style: {

            fill: '#ff9999'

    }

});

强大的动画支持

提供promise式的动画接口和常用缓动函数，轻松实现常州软件技术培训各种动画需求。

var image = new wezrender.graphic.Image({

    style: {

        x: 0,

        y: 0,

        image: '../../images/koala.jpg',

        width: 32,

        height: 24,

        text: 'koala'

    }

});

zr.add(image);

image.animateStyle(true)

    .when(2000, {

        x: 350,

        y: 450,

        width: 360,

        height: 270,

    })

    .start();

易于扩展

分而治之的图形定义策略允许扩展常州企业培训图形元素。

  var dx = Math.cos(angle) * r;

        var tanX = Math.sin(angle);

        var tanY = Math.cos(angle);

        path.arc(

            x, cy, r,

            Math.PI - angle,

            Math.PI * 2 + angle

        );

        var cpLen = r * 0.6;

        var cpLen2 = r * 0.7;

        path.bezierCurveTo(

            x + dx - tanX * cpLen, cy + dy + tanY * cpLen,

            x, y - cpLen2,

            x, y

        );

        path.bezierCurveTo(

            x, y - cpLen2,

            x - dx + tanX * cpLen, cy + dy + tanY * cpLen,

            x - dx, cy + dy

        );

        path.closePath();

    }

});