微信小程序实例源代码 完整版 有使用教程

var example = {}; example.rotate = function (context) { context.beginPath(); context.rotate(10*Math.PI/180); context.rect(225, 75, 20, 10); context.fill(); }; example.scale = function (context) { context.beginPath(); context.rect(25, 25, 50, 50); context.stroke(); context.scale(2,2); context.beginPath(); context.rect(25, 25, 50, 50); context.stroke(); }; example.reset = function (context) { context.beginPath(); context.setFillStyle('#000000'); context.setStrokeStyle('#000000'); context.setFontSize(10); context.setShadow(0, 0, 0, 'rgba(0, 0, 0, 0)'); context.setLineCap('butt'); context.setLineJoin('miter'); context.setLineWidth(1); context.setMiterLimit(10); }; example.translate = function (context) { context.beginPath(); context.rect(10, 10, 100, 50); context.fill(); context.translate(70, 70); context.beginPath(); context.fill(); }; example.save = function (context) { context.beginPath(); context.setStrokeStyle('#00ff00'); context.save(); context.scale(2, 2); context.setStrokeStyle('#ff0000'); context.rect(0, 0, 100, 100); context.stroke(); context.restore(); context.rect(0, 0, 50, 50); context.stroke(); }; example.restore = function (context) { [3, 2, 1].forEach(function (item) { context.beginPath(); context.save(); context.scale(item, item); context.rect(10, 10, 100, 100); context.stroke(); context.restore(); }); }; example.drawImage = function (context) { context.drawImage('/image/wechat.png', 0, 0); }; example.fillText = function (context) { context.setStrokeStyle('#ff0000'); context.beginPath(); context.moveTo(0, 10); context.lineTo(300, 10); context.stroke(); // context.save(); // context.scale(1.5, 1.5); // context.translate(20, 20); context.setFontSize(10); context.fillText('Hello World', 0, 30); context.setFontSize(20); context.fillText('Hello World', 100, 30); // context.restore(); context.beginPath(); context.moveTo(0, 30); context.lineTo(300, 30); context.stroke(); }; example.fill = function (context) { context.beginPath(); context.rect(20, 20, 150, 100); context.setStrokeStyle('#00ff00'); context.fill(); }; example.stroke = function (context) { context.beginPath(); context.moveTo(20, 20); context.lineTo(20, 100); context.lineTo(70, 100); context.setStrokeStyle('#00ff00'); context.stroke(); }; example.clearRect = function (context) { context.setFillStyle('#ff0000'); context.beginPath(); context.rect(0, 0, 300, 150); context.fill(); context.clearRect(20, 20, 100, 50); }; example.beginPath = function (context) { context.beginPath(); context.setLineWidth(5); context.setStrokeStyle('#ff0000'); context.moveTo(0, 75); context.lineTo(250, 75); context.stroke(); context.beginPath(); context.setStrokeStyle('#0000ff'); context.moveTo(50, 0); context.lineTo(150, 130); context.stroke(); }; example.closePath = function (context) { context.beginPath(); context.moveTo(20, 20); context.lineTo(20, 100); context.lineTo(70, 100); context.closePath(); context.stroke(); }; example.moveTo = function (context) { context.beginPath(); context.moveTo(0, 0); context.lineTo(300, 150); context.stroke(); }; example.lineTo = function (context) { context.beginPath(); context.moveTo(20,20); context.lineTo(20,100); context.lineTo(70,100); context.stroke(); }; example.rect = function (context) { context.beginPath(); context.rect(20, 20, 150, 100); context.stroke(); }; example.arc = function (context) { context.beginPath(); context.arc(75,75,50,0,Math.PI*2,true); context.moveTo(110,75); context.arc(75,75,35,0,Math.PI,false); context.moveTo(65,65); context.arc(60,65,5,0,Math.PI*2,true); context.moveTo(95,65); context.arc(90,65,5,0,Math.PI*2,true); context.stroke(); }; example.quadraticCurveTo = function (context) { context.beginPath(); context.moveTo(20, 20); context.quadraticCurveTo(20, 100, 200, 20); context.stroke(); }; example.bezierCurveTo = function (context) { context.beginPath(); context.moveTo(20, 20); context.bezierCurveTo(20, 100, 200, 100, 200, 20); context.stroke(); }; example.setFillStyle = function (context) { ['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) { context.setFillStyle(item); context.beginPath(); context.rect(0 + 75*index, 0, 50, 50); context.fill(); }); }; example.setStrokeStyle = function (context) { ['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) { context.setStrokeStyle(item); context.beginPath(); context.rect(0 + 75*index, 0, 50, 50); context.stroke(); }); }; example.setGlobalAlpha = function (context) { context.setFillStyle('#000000'); [1, 0.5, 0.1].forEach(function (item, index) { context.setGlobalAlpha(item) context.beginPath(); context.rect(0 + 75*index, 0, 50, 50); context.fill(); }); } example.setShadow = function (context) { context.beginPath(); context.setShadow(10, 10, 10, 'rgba(0, 0, 0, 199)'); context.rect(10, 10, 100, 100); context.fill(); }; example.setFontSize = function (context) { [10, 20, 30, 40].forEach(function (item, index) { context.setFontSize(item); context.fillText('Hello, world', 20, 20 + 40*index); }) }; example.setLineCap = function (context) { context.setLineWidth(10); ['butt', 'round', 'square'].forEach(function (item, index) { context.beginPath(); context.setLineCap(item); context.moveTo(20, 20 + 20*index); context.lineTo(100, 20 + 20*index); context.stroke(); }); }; example.setLineJoin = function (context) { context.setLineWidth(10); ['bevel', 'round', 'miter'].forEach(function (item, index) { context.beginPath(); context.setLineJoin(item); context.moveTo(20 + 80*index, 20); context.lineTo(100 + 80*index, 50); context.lineTo(20 + 80*index, 100); context.stroke(); }); }; example.setLineWidth = function (context) { [2, 4, 6, 8, 10].forEach(function (item, index) { context.beginPath(); context.setLineWidth(item); context.moveTo(20, 20 + 20*index); context.lineTo(100, 20 + 20*index); context.stroke(); }); }; example.setMiterLimit = function (context) { context.setLineWidth(4); [2, 4, 6, 8, 10].forEach(function (item, index) { context.beginPath(); context.setMiterLimit(item); context.moveTo(20 + 80*index, 20); context.lineTo(100 + 80*index, 50); context.lineTo(20 + 80*index, 100); context.stroke(); }); }; module.exports = example