Quantcast
Channel: Adobe Community : All Content - Edge Animate
Viewing all articles
Browse latest Browse all 9897

html5 canvas in Edge Animate

$
0
0

Hi folks

 

I came over an interesting website yesterday made by Caleb Evans (http://calebevans.me/projects/jcanvas/ ).  He has written an API for html5 canvas to use in Jquery.  I have tested it in edge, and it works well .  How to use it in edge:

 

1. download the JS from his site.

2. In Edge, select Add JS file from disk

3. navigate to the file (named Jcanvas.min.js)

4. After this, save the project  and quit EA.

'4. Open the EA HTML file. 

5. In the body part add this tag: 

 

<canvaswidth='300'height='150'></canvas>

 

6. then, in animate, add code like this:

 

// Draw a circle

$("canvas").drawArc({

  draggable: true,

  fillStyle: "green",

  x: 100, y: 100,

  radius: 50

});

// Draw a 90° arc

$('canvas').drawArc({

  strokeStyle: '#000',

  strokeWidth: 5,

  x: 100, y: 100,

  radius: 50,

  // start and end angles in degrees

  start: 0, end: 90

 

Nice isn't it?  For more examples see;  http://calebevans.me/projects/jcanvas/docs/

 

Almost all of the html5 canvas commands are available

 

Svein-Tore


Viewing all articles
Browse latest Browse all 9897

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>