Login   Register  
Icontem

File: multiple_shapes_example.html

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of Arturs Sosins  >  Canvas Events  >  multiple_shapes_example.html  >  Download  
File: multiple_shapes_example.html
Role: Example script
Content type: text/plain
Description: Example with multiple shapes
Class: Canvas Events
Emulate mouse events on canvas elements
Author: By
Last change:
Date: 2011-08-22 06:58
Size: 2,124 bytes
 

Contents

Class file image Download 
<!--
/*************************************************************
 * This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com
 * Feel free to distribute and modify code, but keep reference to its creator
 *
 * Canvas Events class extends canvas object to help to attach mouse events 
 * to different shapes with minimal javascript code modifications.
 * Canvas context methods that perform actual drawing like
 * stroke, fill, strokeRect, fillRect, drawImage
 * return a shape object to which you can attach events
 *
 * For more information, examples and online documentation visit: 
 * http://webcodingeasy.com/JS-classes/Emulate-events-on-canvas-objects
**************************************************************/
-->
<html>
<head>
</head>
<body>
<canvas id='canvas' width='800' height='600'></canvas>
<script src="./canvas_events.packed.js" type="text/javascript"></script>
<script>
var ctx = new canvas_events("canvas");
function draw(ctx)
{
  var sin = Math.sin(Math.PI/6);
  var cos = Math.cos(Math.PI/6);
  ctx.translate(200, 200);
  var c = 0;
  for (var i=0; i <= 12; i++) {
    c = Math.floor(255 / 12 * i);
    ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
    var rect = ctx.fillRect(0, 0, 100, 10);
	rect.addEvent("mouseover", function(e,args){ this.fillStyle = "red"; this.recreate(args); this.fill()});
	 rect.addEvent("mouseout", function(e,args){ var fill = this.fillStyle; this.fillStyle = "#fff"; this.recreate(args); this.fill(); this.fillStyle = fill; this.recreate(args); this.fill();});
    ctx.transform(cos, sin, -sin, cos, 0, 0);
  }
  
  ctx.setTransform(-1, 0, 0, 1, 200, 200);
  ctx.fillStyle = "rgba(255, 128, 255, 0.5)";
  var rect = ctx.fillRect(0, 50, 100, 100);
  rect.addEvent("mouseover", function(e,args){this.fillStyle = "red"; this.recreate(args); this.fill();});
  rect.addEvent("mouseout", function(e,args){var fill = this.fillStyle; this.fillStyle = "#fff"; this.recreate(args); this.fill(); this.fillStyle = fill; this.recreate(args); this.fill();});
};
draw(ctx);

</script>
</body>
</html>