File: complex_shape_example.html

Recommend this page to a friend!
  Classes of Arturs Sosins   Canvas Events   complex_shape_example.html   Download  
File: complex_shape_example.html
Role: Example script
Content type: text/plain
Description: Complex shape using path
Class: Canvas Events
Emulate mouse events on canvas elements
Author: By
Last change:
Date: 12 years ago
Size: 1,535 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"); ctx.clearRect(0,0,800,600); ctx.beginPath(); ctx.moveTo(100,130); ctx.lineTo(50,200); ctx.lineTo(125,150); ctx.lineTo(200,200); ctx.lineTo(140,140); ctx.lineTo(200,50); ctx.lineTo(125,100); ctx.lineTo(50,50); ctx.lineTo(100,130); var rect = ctx.fill(); ctx.fillStyle = "black"; rect.addEvent("mouseover", function(e,args){this.strokeStyle = "red"; this.recreate(args);this.closePath();this.stroke();}); rect.addEvent("mouseout", function(e,args){this.clearRect(0,0,800,600); this.recreate(args);this.fill();}); </script> </body> </html>