This is yet the part 6 of the html5 canvas samples.let we continuig our advanced in unknown lands!
the subjects studied here ( more 45 codes) are the follow:
-Drawings & animations
-Blur image animated
-ThreeJS library animations
-Animations: -draw and anim gauge
-draw rains and anim
-Cube mesh animated
-Rotate drawings with no trail
-Draw text on image
-Context font use.
-Keyboard events and drawings on canvas
-Polygons-stars drawings with gradients fills.
-11 pencils samples drawings (with brushes,pattern,gradients)
-Drag & drop with canvas
-Some drawings, images resizing & antialiasing
see the screenshots below of what the application does.
As i said in preview canvas posts , some samples are adapted from great web tutoriels to bring something consistent to vfp users.If the case, its pointed to the author or site in the code.
This code works only from the vfp webBrowser emulated (tested on IE11 emulation).
All is tested on Windows8.1 only.
-The code have a new powerfull method to capture the canvas drawings with a modal dialog box.Simply press CTRL+C (vfp _cliptext works with web page clipboard) to capture the encoded64 image and open it with MSpaint(can resize, recolor,save as another format...)
If the dialog box dont appear that want to say impossible to capture the canvas (if you continue,you have a blank image).
var canvas=document.getElementById('ycanvas1'); //point to the canvas object by its id
var ctx=canvas.getContext('2d'); //get the context for drawing
ctx.fillStyle="navy"; //color you want to install as real & exportable background.
ctx.clearRect(0,0,canvas.width,canvas.height); //clear the context canvas
ctx.fillRect(0,0,canvas.width,canvas.height) //fill with the color specified
This is used in preview post:http://yousfi.over-blog.com/2015/05/texts-worshop-on-html5-canvas.html
trick:in the app and after showing image in mspaint , unselect;rightclick menu and invert color to make a new background.
Note that also if you draw an image+some drawings you cannot capture by this method the canvas...
-The full resizing canvas makes some area and disappear the form buttons.Choose restore button of window form to return to the first situation.
I joigned some js files to make the demo applications as THreeJS or blur images running.
If you have some problems simply clear the document to make it rebuild and run the menu.
Download the zip below : there is a visual form and its equivalent as prg.run one of these and please report any bug.