Xixjs NPM | npm.io

XixJS

The XixJS library for Javascript

What is XixJS ?

XixJS is a Javascript library made for people who want to create simple shape in canvas with only a line of code. It is easy to use and simple enough for the people that started to learn Javascript canvas. You may find it not useful or terrible, because it's only made for beginners. XixJS is still in development so it will contain bugs. In the 0.11 version mext is removed. But in the version 0.12.0, MetectJS is added to XixJS

Start using XixJS

Note: "xix" acts as a global variable, along with "c", "canvas", "mext". "c" variable is "context"

Type this in in your .html files

	<script type="text/javascript" src="xix.min.js"></script>

	<script>
		xix.createCanvas();
		xix.getCanvas();
	</script>

You can also get the specific canvas by using xix.getCanvasById();

To use xix.js's functions add another tag in the tag

Functions

All the contents in function() are variable, not text

Draw a rectangle

xix.rectangle(left,top,width,height,color);

Draw a square

xix.square(left,top,width,color);

Draw a line

xix.line(leftstart, topstart, leftend, topend, color);

Draw a circle

xix.circle(left, right, width, color, bordercolor);

Draw multiple circles with random position

xix.multi_circle(width, color, bordercolor, looptime);

Draw multiple circles with random size and position

xix.multi_circle_rsize(color, bordercolor, looptime);

Draw multiple rectangles with random position

xix.multi_rect(width, height, color, looptime);

Draw multiple rectangles with random size and position

xix.multi_rect_rsize(maximumwidth, maximumheight, color, looptime);

Draw multiple squares with random position

xix.multi_square(width, color, looptime);

Draw multiple squares with random size and position

xix.multi_square_rsize(maximumwidth, color, looptime);

Animate bouncing circle with random speed, random size from 30 to less than 200 pixels

xix.animate_circle(color);

Animate bouncing circle with adjustable size, position but with random speed

xix.animate_circle_asp(color,radius,left,top);

Animate bouncing circle with adjustable size and speed

xix.animate_circle_ass(color,radius,left,top,xspeed,yspeed);

Animate bouncing circle with random size and speed but with adjustable position

xix.animate_circle_ap(color,left,top);

Animate moving circle vertically

xix.animate_vert_circle(left,top,radius,upperlimit,bottomlimit,speed,color);

Animate moving circle horizontally

xix.animate_hor_circle(left,top,radius,leftlimit,rightlimit,speed,color);

Animate moving circle in a limited zone

xix.animate_limit_circle(left,top,radius,upperlimit,bottomlimit,speed,color);

Animate bouncing rectangle with random speed

xix.animate_rect(color,width,height,left,top,xspeed,yspeed);

Animate bouncing square with random speed

xix.animate_square(color,width,left,top,xspeed,yspeed);

Animate 100 bouncing circle with random speed, random position, random size from 30 to less than 50 pixels

xix.animate_multi_circle(color,bordercolor);

Animate 100 bouncing circle with random speed, random size from 30 to less than 50 pixels which start from the top-left corner

xix.animate_multi_circle_mesh(color,bordercolor);

Animate multiple bouncing circle with random speed and adjustable size which start from the top-left corner

xix.animate_multi_circle_mesh_adjustable(color,bordercolor,radius);

Animate multiple bouncing circle with random speed, random position and adjustable size.

xix.animate_multi_circle_adjustable(color,bordercolor,radius);

Create glowing mouse movement effects

xix.mouse_effect_glow(color, changedcolor);

Create glowing mouse movement effects but the circle doesn't move.

xix.mouse_effect_glow_freeze(color, changedcolor);

Draw a text

xix.text(size,font,content,left,top,color,bordercolor);

MetectJS in XixJS

If you don't know, MetectJS is a Javascript library used to detect different OS and machines and run different functions on them.

You can use MetectJS by simply type:

xix.metect({

window: function(){ //This code runs when detects Windows OS }

mac: function(){ //This code runs when detects Mac OS }

linux: function(){ //This code runs when detects Linux OS }

mobile: function(){ //This code runs when detects mobile devices }

unix: function(){ //This code runs when detects Unix OS }

safari: function(){ //This code runs when detects Safari browser }

  chrome: function(){
  //This code runs when detects Chromes browser
  }

  firefox: function(){
  //This code runs when detects Firefox browser
  }
      
  opera: function(){
  //This code runs when detects Opera browser
  }

  msie: function(){
  //This code runs when detects Microsoft Internet Explorer browser
  }
})