Html5 canvas samples part 5
I continue to bring some awesome and wonderfull samples with the html5 canvas class mainly with javascript codes picked and adapted from the web, mixed with visual foxpro codes.
This last is not able to traverse DOM coding to make some drawings (maybe someone gives me a solution, i wait yet...).Javascript is indicated to be the number one in canvas programing.
In preview parts i indicated the method to
-build canvas and any other element with DOM ( as in html)
-build any script (javascript mainly) and run it form a vfp form or IE application.
-make drawings and animations from vfp (with a simple timer) or from javascript(with setInterval function)
the common point is the vfp activeX IE Browser (shell.explorer.2) or the interner explorer application.
This chapter have the follow summary (see the menu)
-clipping regions ( image,figur on canvas)
-draw random polygons (as stars on canvas)
-Make the canvas element as fullscreen with web API
-Animated polygons(sun,stars)
-Wheels (animated)
-Save canvas as image with new method in Mspaint
-Working with interactive polygons
-Circular texts with gradients,..
-Texts with pattern as image or gradients with a specific font
-Images Shadows (transparent PNG is better)
-Animated rectangles
-Charts (pie chart,lines chart)
-11 Working examples with PaperJS free javascript library
For some examples internet must be connected to access some web resources (images, http://paperjs.org/assets/js/paper.js..)
If the source are from author or site its pointed in the code.
Run ycanvas.prg, its associated with the ycanvas.mpr(if you modify the menu , recompile it as mpr mandatory).
Download the zip but warning you must have ALREADY installed the ie EMULATION (IE11 here) in REGISTRY, otherwise you see anything but errors returned.
See some screenshots below to be informed what the applicatio can do.
All is tested on Windows8.1 only.
*This is the main form to run the demo application.
*Begin code
Publi oform
oform=Newobject("ycanvas")
oform.Show
Read Events
Return
*
Define Class ycanvas As Form
Height = 720
Width = 897
ShowWindow = 2
AutoCenter = .T.
Caption = "HTML5 CANVAS DRAWINGS"
ystart = .F.
xx = .0
nf = 0
t0 = 0
ii = 0
ncount = 0
uu = 0
Add Object olecontrol1 As OleControl With ;
Oleclass="shell.explorer.2",;
Top = 0, ;
Left = 0, ;
Height = 672, ;
Width = 888, ;
Anchor = 15, ;
Name = "Olecontrol1"
Add Object command24 As CommandButton With ;
Top = 674, ;
Left = 324, ;
Height = 30, ;
Width = 132, ;
FontSize = 14, ;
Anchor = 768, ;
Caption = "Menu", ;
MousePointer = 15, ;
ForeColor = Rgb(255,0,0), ;
BackColor = Rgb(0,255,0), ;
Name = "Command24"
Add Object timer8 As Timer With ;
Top = 672, ;
Left = 804, ;
Height = 25, ;
Width = 25, ;
Enabled = .F., ;
Interval = 100, ;
Name = "Timer8"
Procedure yremovescript
Lparameters xId
Try
script = Thisform.olecontrol1.Document.getElementById(xId)
script.parentElement.removeChild(script)
Thisform.olecontrol1.Document.body.innerhtml=""
Thisform.olecontrol1.Refresh
Catch
Endtry
Endproc
Procedure ybuildcanvas
Lparameters xwidth,xheight
If Empty(xwidth)
xwidth=Thisform.olecontrol1.Width
Endi
If Empty(xheight)
xheight=Thisform.olecontrol1.Height
Endi
Local ycanvas,ctx
Local ctx,w,h
ycanvas=Null
ctx=Null
With Thisform.olecontrol1.Document
ycanvas = .createElement("canvas")
With ycanvas
.Id = "ycanvas1"
.Width=xwidth
.Height=xheight
.Style.position = "absolute"
.Style.Border = "1px solid"
.Style.zIndex="100"
.Style.background="gray"
Endwith
.body.appendChild(ycanvas)
Endwith
sleep(1000)
Try
ctx=ycanvas.getContext("2d")
ctx.translate(0 ,0)
ctx.setTransform(1,0,0,1,0,0)
ctx.FillStyle = '000000'
ctx.clearRect(0, 0, ycanvas.Width,ycanvas.Height)
Catch
Endtry
Endproc
Procedure ybuild
Local m.myvar
TEXT to m.myvar noshow
<!doctype html>
<html>
<head>
<script language="Javascript">
//this code prevent rightclick
document.addEventListener("contextmenu", function(e){
e.preventDefault();
}, false);
</script>
</head>
<body bgcolor="black">
</body></html>
ENDTEXT
Local m.lcdest
m.lcdest=Addbs(Sys(2023))+"ytest.html"
Strtofile(m.myvar, m.lcdest)
Thisform.olecontrol1.Navigate(m.lcdest)
Endproc
Procedure Load
Set Safe Off
Declare Integer Sleep In kernel32 Integer
Declare Integer BringWindowToTop In user32 Integer
Endproc
Procedure Init
Publi m.yrep
m.yrep=Addbs(Justpath(Sys(16,1)))
Thisform.ii=0
Thisform.ncount=0
Thisform.SetAll("anchor",768,"commandbutton")
Thisform.ybuild()
Endproc
Procedure Destroy
ctx=Null
Release ctx
ycanvas=Null
Release ycanvas
dele file addbs(sys(2023)+"*.html"
dele file addbs(sys(2023)+"stars.jpg"
Clea Events
Endproc
Procedure Resize
Thisform.olecontrol1.Resize()
Endproc
Procedure olecontrol1.Init
This.silent=.T.
Endproc
Procedure command24.RightClick
Do ycanvas.mpr
Endproc
Procedure command24.Click
Do ycanvas.mpr
Endproc
Procedure timer8.Timer
Thisform.uu=Thisform.uu+1
If Thisform.uu>360
This.Enabled=.F.
Else
Thisform.olecontrol1.Document.script.ydraw(Thisform.uu)
Endi
Endproc
Enddefine
*
*-- EndDefine: ycanvas
*End code
