This plug-in draws in the image by using various animations. It is assumed to build it in the slide show and the image gallery, etc. and is developed.
ImageDrawer Project http://github.com/holyshared/ImageDrawer
Please see the following about use.
First of all, the canvas element is described. The content is as follows.
<canvas id="myCanvas"></canvas>
The following describe javascript. The canvas is specified with setCanvas(). And, the image where it draws with setImage() is specified.
Please use the read image.
var myImage = new Image(); myImage.src = "images/draw-image.jpg"; myImage.onload = function() { var myCanvas = document.id("myCanvas"); var drawer = new ImageDrawer.Grid({ 'height': 55, 'width': 65, 'transition': 'expo:in:out', 'onDrawStart': function() { //image drawing start log.set("html", "Start"); }, 'onDrawComplete': function() { //image drawing complete log.set("html", "Complete"); } }); drawer.setCanvas(myCanvas) drawer.setImage(myImage); //drawing a image drawer.drawLeft(); }
or
var myImage = new Image(); myImage.src = "images/draw-image.jpg"; myImage.onload = function() { var myCanvas = document.id("myCanvas"); var drawer = new ImageDrawer.Grid({ 'canvas': myCanvas, 'source': myImage, 'height': 55, 'width': 65, 'transition': 'expo:in:out', 'onDrawStart': function() { //image drawing start log.set("html", "Start"); }, 'onDrawComplete': function() { //image drawing complete log.set("html", "Complete"); } }); //drawing a image drawer.drawLeft(); }
All options have default values assigned, hence are optional.
First of all, the canvas element is described. The content is as follows.
<canvas id="myCanvas"></canvas>
The following describe javascript. The canvas is specified with setCanvas(). And, the image where it draws with setImage() is specified.
Please use the read image.
var myImage = new Image(); myImage.src = "images/draw-image.jpg"; myImage.onload = function() { var myCanvas = document.id("myCanvas"); var drawer = new ImageDrawer.Expand({ 'width': 65, 'transition': 'expo:in:out', 'onDrawStart': function() { //image drawing start log.set("html", "Start"); }, 'onDrawComplete': function() { //image drawing complete log.set("html", "Complete"); } }); drawer.setCanvas(myCanvas) drawer.setImage(myImage); //drawing a image drawer.drawLeft(); }
or
var myImage = new Image(); myImage.src = "images/draw-image.jpg"; myImage.onload = function() { var myCanvas = document.id("myCanvas"); var drawer = new ImageDrawer.Expand({ 'canvas': myCanvas, 'source': myImage, 'width': 65, 'transition': 'expo:in:out', 'onDrawStart': function() { //image drawing start log.set("html", "Start"); }, 'onDrawComplete': function() { //image drawing complete log.set("html", "Complete"); } }); //drawing a image drawer.drawLeft(); }
All options have default values assigned, hence are optional.
The MIT License http://www.opensource.org/licenses/mit-license.php
A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.
Found a bug in this plugin? Please report it this repository's Github Issues.
blog comments powered by Disqus