diff --git a/README.md b/README.md index f2986a2..7ebb8dd 100644 --- a/README.md +++ b/README.md @@ -46,33 +46,72 @@ Download the minified js file in dist folder and include it in your html. Generate LeonSans and draw it in the Canvas element of HTML5. ```javascript -this.canvas = document.createElement('canvas'); -document.body.appendChild(this.canvas); -this.ctx = this.canvas.getContext("2d"); +let leon, controll, canvas, ctx; + +const sw = 800; +const sh = 600; +const pixelRatio = 2; + +function init() { + canvas = document.createElement('canvas'); + document.body.appendChild(canvas); + ctx = canvas.getContext("2d"); + + canvas.width = sw * pixelRatio; + canvas.height = sh * pixelRatio; + canvas.style.width = sw + 'px'; + canvas.style.height = sh + 'px'; + ctx.scale(pixelRatio, pixelRatio); + + leon = new LeonSans({ + text: 'The quick brown\nfox jumps over\nthe lazy dog', + color: ['#000000'], + size: 80, + weight: 200 + }); + + + requestAnimationFrame(animate); +} -this.leon = new LeonSans({ - text: 'The quick brown\nfox jumps over\nthe lazy dog', - color: ['#000000'], - size: 160, - weight: 200 -}); +function animate(t) { + requestAnimationFrame(animate); -requestAnimationFrame(animate); + ctx.clearRect(0, 0, sw, sh); + const x = (sw - leon.rect.w) / 2; + const y = (sh - leon.rect.h) / 2; + leon.position(x, y); -function animate(t) { - requestAnimationFrame(animate); + leon.draw(ctx); +} - this.ctx.clearRect(0, 0, document.body.clientWidth, document.body.clientHeight); +window.onload = () => { + init(); +}; +``` - const x = (document.body.clientWidth - this.leon.rect.w) / 2; - const y = (document.body.clientHeight - this.leon.rect.h) / 2; - this.leon.position(x, y); +For the drawing animation, include TweenMax (JS animation library) in your html. +```html + +``` - this.leon.draw(this.ctx); +And update all the drawing valuse from 0 to 1 +```javascript +let i, total = leon.drawing.length; +for (i = 0; i < total; i++) { + TweenMax.fromTo(leon.drawing[i], 1.6, { + value: 0 + }, { + delay: i * 0.05, + value: 1, + ease: Power4.easeOut + }); } ``` + + ### Option list | Name | Type | Description |