微信小程序 Canvas增强组件实例详解及源码分享

 <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);

 var circle = new wezrender.graphic.shape.Circle(       shape: {      cx: 50,      cy: 50,      r: 50    },    style: {      fill: 'red',      lineWidth: 10    }  });

 var droplet = new wezrender.graphic.shape.Droplet({    shape: {      cx: 200,      cy: 300,      width: 50,      height: 50    },    style: {        fill: '#ff9999'    }  });

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 Pin = wezrender.graphic.Path.extend({    type: 'pin',    shape: {      // x, y on the cusp      x: 0,      y: 0,      width: 0,      height: 0    },    buildPath: function (path, shape) {      var x = shape.x;      var y = shape.y;      var w = shape.width / 5 * 3;      // Height must be larger than width      var h = Math.max(w, shape.height);      var r = w / 2;      // Dist on y with tangent point and circle center      var dy = r * r / (h - r);      var cy = y - h + r + dy;      var angle = Math.asin(dy / r);      // Dist on x with tangent point and circle center      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();    }  });