Customizable html5 canvas analogic clocks
In the previous posts relative to html5 canvas i shipped many html5 canvas clocks.
these codes below customize three of them on many parameters as
-needles hour+minutes colors
-graduations colors
- hour digit numbers colors
-text color
-clock face gradients colors
-background color,gradients,pattern.
these parameters combinations can produce thousands of diffrent clocks.
this needs only to run the form for making the settings,the clock is shown in fullscreen (with IE emulation -ie11 tested here-)
Rightclick to close the window.
See some screenShots below of this application.
All is tested on Windows8.1 only
*1* pure html5 canvas clock (no image)
Publi yform
yform=Newobject("yclock")
yform.Show
Read Events
Retu
*
Define Class yclock As Form
Top = 0
Left = 0
Height = 209
Width = 354
ShowWindow = 2
Caption = "Clock settings"
MaxButton = .F.
MinButton = .F.
BackColor = Rgb(102,0,51)
Name = "Form1"
Add Object command1 As CommandButton With ;
Top = 9, ;
Left = 11, ;
Height = 37, ;
Width = 133, ;
FontBold = .T., ;
FontSize = 10, ;
Caption = "colCircle1", ;
MousePointer = 15, ;
ForeColor = Rgb(255,0,255), ;
BackColor = Rgb(0,0,255),;
Name = "Command1"
Add Object command2 As CommandButton With ;
Top = 49, ;
Left = 11, ;
Height = 38, ;
Width = 133, ;
FontBold = .T., ;
FontSize = 10, ;
Caption = "cilCircle2", ;
MousePointer = 15, ;
ForeColor = Rgb(0,0,255), ;
BackColor = Rgb(0,255,0), ;
Name = "Command2"
Add Object command3 As CommandButton With ;
Top = 88, ;
Left = 11, ;
Height = 38, ;
Width = 133, ;
FontBold = .T., ;
FontSize = 10, ;
Caption = "Gradu(hour,min)", ;
MousePointer = 15, ;
ForeColor = Rgb(0,0,255), ;
BackColor = Rgb(0,255,0), ;
Name = "Command3"
Add Object command4 As CommandButton With ;
Top = 167, ;
Left = 11, ;
Height = 38, ;
Width = 133, ;
FontBold = .T., ;
FontSize = 10, ;
Caption = "COltext", ;
MousePointer = 15, ;
ForeColor = Rgb(0,0,255), ;
BackColor = Rgb(0,255,0), ;
Name = "Command4"
Add Object command5 As CommandButton With ;
Top = 12, ;
Left = 205, ;
Height = 37, ;
Width = 133, ;
FontBold = .T., ;
FontSize = 10, ;
Caption = "Gradient1", ;
MousePointer = 15, ;
ForeColor = Rgb(0,0,255), ;
BackColor = Rgb(0,255,0), ;
Name = "Command5"
Add Object command6 As CommandButton With ;
Top = 53, ;
Left = 206, ;
Height = 37, ;
Width = 133, ;
FontBold = .T., ;
FontSize = 10, ;
Caption = "Gradient2", ;
MousePointer = 15, ;
ForeColor = Rgb(0,0,255), ;
BackColor = Rgb(0,255,0), ;
Name = "Command6"
Add Object command7 As CommandButton With ;
Top = 90, ;
Left = 206, ;
Height = 37, ;
Width = 133, ;
FontBold = .T., ;
FontSize = 10, ;
Caption = "Gradient3", ;
MousePointer = 15, ;
ForeColor = Rgb(0,0,255), ;
BackColor = Rgb(0,255,0), ;
Name = "Command7"
Add Object command8 As CommandButton With ;
Top = 165, ;
Left = 151, ;
Height = 37, ;
Width = 72, ;
FontBold = .T., ;
FontSize = 10, ;
Caption = "doDefault", ;
MousePointer = 15, ;
ForeColor = Rgb(255,0,0), ;
BackColor = Rgb(0,255,255), ;
Name = "Command8"
Add Object command9 As CommandButton With ;
Top = 164, ;
Left = 225, ;
Height = 37, ;
Width = 123, ;
FontBold = .T., ;
FontSize = 10, ;
Caption = "do these settings", ;
MousePointer = 15, ;
ForeColor = Rgb(255,0,0), ;
BackColor = Rgb(0,0,255), ;
Name = "Command9"
Add Object command10 As CommandButton With ;
Top = 126, ;
Left = 11, ;
Height = 38, ;
Width = 133, ;
FontBold = .T., ;
FontSize = 10, ;
Caption = "Gradu(seconds)", ;
MousePointer = 15, ;
ForeColor = Rgb(0,0,255), ;
BackColor = Rgb(0,255,0), ;
Name = "Command10"
Add Object label1 As Label With ;
AutoSize = .T., ;
FontBold = .T., ;
FontSize = 18, ;
BackStyle = 0, ;
Caption = "?", ;
Height = 32, ;
Left = 300, ;
MousePointer = 15, ;
Top = 127, ;
Width = 17, ;
ForeColor = Rgb(0,255,0), ;
Name = "Label1"
Procedure yrun
*3*yclock.prg
_Screen.WindowState=1
Thisform.WindowState=1
Declare Integer Sleep In kernel32 Integer
Local apie
apie=Newobject("internetexplorer.application")
Sleep(200)
TEXT to m.myvar textmerge noshow
<!DOCTYPE HTML>
<html>
<body bgcolor="black" scroll="no" oncontextmenu="window.close();return false;" onload="init();">
<canvas id="ycanvas1" width="<<sysmetric(1)>>" height="650" style="background-color:black;"></canvas>
<script>
function init(){
drawHands();
setInterval('drawHands()',1000);
}
function drawHands(){
var canvas = document.getElementById('ycanvas1');
var ctx = canvas.getContext('2d');
var x=500;
var y=300;
var r=x*0.5;
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
ctx.clearRect(0,0,400,400);
//draw background
ctx.save();
ctx.translate(x,y);
var grad = ctx.createLinearGradient(-r,r,r,-r);
grad.addColorStop(0, '<<_screen.grad1>>');
grad.addColorStop(0.5,'<<_screen.grad2>>');
grad.addColorStop(1,'<<_screen.grad3>>');
ctx.beginPath();
ctx.fillStyle = grad;
ctx.arc(0,0,r,0,Math.PI*2,false);
ctx.fill();
grad = ctx.createLinearGradient(-r,-r,r,r);
grad.addColorStop(0,'<<_screen.grad1>>');
grad.addColorStop(0.5,'<<_screen.grad2>>');
grad.addColorStop(1,'<<_screen.grad3>>');
ctx.beginPath();
ctx.fillStyle = grad;
ctx.arc(0,0,r*0.85,0,Math.PI*2,false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle ='<<_screen.colCircle1>>'; //cercle 1
ctx.arc(0,0,r*0.8,0,Math.PI*2,false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = '<<_screen.colCircle2>>'; //petit cercle 2
ctx.arc(0,0,r*0.4,0,Math.PI*2,false);
ctx.fill();
ctx.restore();
//draw index
ctx.save();
ctx.translate(x,y);
ctx.fillStyle = '<<_screen.gradu>>'; //graduations (hours+minutes)
for(var i=0;i<12;i++){
ctx.rotate(Math.PI/6);
ctx.fillRect(-r*0.04/2,-r*0.75,r*0.04,r*0.2);
}
ctx.restore();
//draw text
ctx.save();
ctx.translate(x,y);
ctx.fillStyle = '<<_screen.colText>>'; //filltext
ctx.font = "16px bold serif";
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fillText('Fox Time',0,r*0.47);
ctx.restore();
//draw hour hand
ctx.save();
ctx.translate(x,y);
ctx.beginPath();
ctx.rotate((h/12+m/12/60)*2*Math.PI);
ctx.strokeStyle = '<<_screen.gradu>>'; //hour needle
ctx.lineWidth = r*0.02;
ctx.moveTo(0,0);
ctx.lineTo(0,-r*0.4);
ctx.stroke();
ctx.restore();
//draw minute hand
ctx.save();
ctx.translate(x,y);
ctx.rotate(m*2*Math.PI/60);
ctx.beginPath();
ctx.strokeStyle = '<<_screen.gradu>>'; //minutes needle
ctx.lineWidth = r*0.02;
ctx.moveTo(0,0);
ctx.lineTo(0,-r*0.6);
ctx.stroke();
ctx.restore();
//draw second hand
ctx.save();
ctx.translate(x,y);
ctx.beginPath();
ctx.rotate(s*2*Math.PI/60);
ctx.strokeStyle = '<<_screen.ysec>>'; //seconds needle
ctx.lineWidth = r*0.01;
ctx.moveTo(0,r*0.1);
ctx.lineTo(0,-r*0.7);
ctx.stroke();
ctx.restore();
ctx.save();
ctx.translate(x,y);
ctx.beginPath();
ctx.fillStyle = '<<_screen.ysec>>'; //small circle (seconds needles)
ctx.arc(0,0,r*0.02,0,Math.PI*2,false);
ctx.fill();
ctx.restore();
}
</script>
<Center><p Style="color:white;">RightClick To Close the Window.</p></Center>
</body>
</html>
ENDTEXT
Set Safe Off
m.lcdest=Addbs(Sys(2023))+"test.html"
Strtofile(m.myvar,m.lcdest)
apie.Navigate(m.lcdest)
Declare Integer BringWindowToTop In user32 Integer
With apie
.Navigate(m.lcdest)
.menubar=0
.Toolbar=0
.StatusBar=0
.fullscreen=1
BringWindowToTop(.HWnd)
.Visible=.T.
Endwith
_Cliptext=apie.Document.body.innerhtml
Messagebox("The code is in clipboard",0+32+4096,"Code captured",1000)
Thisform.Release
Endproc
Procedure Init
With Thisform
.Left=10
.Top=50
Endwith
With _Screen
.AddProperty("colCircle1","rgb(0,0,255)")
.AddProperty("colCircle2","rgb(0,50,255)")
.AddProperty("gradu","rgb(0,255,255)")
.AddProperty("ysec","rgb(255,0,0)")
.AddProperty("colText","rgb(255,255,255)")
.AddProperty("grad1","rgb(128,128,128)")
.AddProperty("grad2","rgb(255,255,255)")
.AddProperty("grad3","rgb(128,128,128)")
Endwith
With Thisform
.command1.BackColor=Eval(_Screen.colCircle1)
.command2.BackColor=Eval(_Screen.colCircle2)
.command3.BackColor=Eval(_Screen.gradu)
.command10.BackColor=Eval(_Screen.ysec)
.command4.BackColor=Eval(_Screen.coltext)
.command5.BackColor=Eval(_Screen.grad1)
.command6.BackColor=Eval(_Screen.grad2)
.command1.BackColor=Eval(_Screen.grad3)
Endwith
Endproc
Procedure Destroy
Clea Events
Endproc
Procedure command1.Click
Local m.xcolor
xcolor=Getcolor()
If !m.xcolor=-1
This.BackColor=m.xcolor
Endi
_Screen.colCircle1="#"+Chrtran("123456","563412",;
Right(Trans[m.xcolor ,"@0" ],6))
Endproc
Procedure command2.Click
Local m.xcolor
xcolor=Getcolor()
If !m.xcolor=-1
This.BackColor=m.xcolor
Endi
_Screen.colCircle2="#"+Chrtran("123456","563412",;
Right(Trans[m.xcolor ,"@0" ],6))
Endproc
Procedure command3.Click
Local m.xcolor
xcolor=Getcolor()
If !m.xcolor=-1
This.BackColor=m.xcolor
Endi
_Screen.gradu="#"+Chrtran("123456","563412",;
Right(Trans[m.xcolor ,"@0"],6))
Endproc
Procedure command4.Click
Local m.xcolor
xcolor=Getcolor()
If !m.xcolor=-1
This.BackColor=m.xcolor
Endi
_Screen.coltext="#"+Chrtran("123456","563412",;
Right(Trans[m.xcolor ,"@0"],6))
Endproc
Procedure command5.Click
Local m.xcolor
xcolor=Getcolor()
If !m.xcolor=-1
This.BackColor=m.xcolor
Endi
_Screen.grad1="#"+Chrtran("123456","563412",;
Right(Trans[m.xcolor ,"@0"],6))
Endproc
Procedure command6.Click
Local m.xcolor
xcolor=Getcolor()
If !m.xcolor=-1
This.BackColor=m.xcolor
Endi
_Screen.grad2="#"+Chrtran("123456","563412",;
Right(Trans[m.xcolor ,"@0"],6))
Endproc
Procedure command7.Click
Local m.xcolor
xcolor=Getcolor()
If !m.xcolor=-1
This.BackColor=m.xcolor
Endi
_Screen.grad3="#"+Chrtran("123456","563412",;
Right(Trans[m.xcolor ,"@0"],6))
Endproc
Procedure command8.Click
With _Screen
.colCircle1="#16b"
.colCircle2="#05a"
.gradu="gold"
.ysec="red"
.coltext="white"
.grad1="rgb(128,128,128)"
.grad2="rgb(255,255,255)"
.grad3="rgb(128,128,128)"
Endwith
Thisform.yrun()
Endproc
Procedure command9.Click
Thisform.yrun()
Endproc
Procedure command10.Click
Local m.xcolor
xcolor=Getcolor()
If !m.xcolor=-1
This.BackColor=m.xcolor
Endi
_Screen.ysec="#"+Chrtran("123456","563412",;
Right(Trans[m.xcolor ,"@0"],6))
Endproc
Procedure label1.Click
Local m.myvar
TEXT to m.myvar noshow
the html5 canvas is used to this goal.The code runs only with ie
emulation (ie11 tested).
this code builds a clock with custom settings.
-the cirle1 color
-the circle2 color
-the needles (hour+minutes) color
-the needle seconds color (with samll cirle)
-the clock circle border with tri gradient colors.
-the text color
the default settings (set initially in form init).
can customize all or some properties( other set with default) and valid
can run the default properties directly.
the code (as prg) of the clock build is captured to clipboard(can simply pasete it
on any text editor ).
-the applicaation runs on fullscreen (rightclick to close the window).
with this settings can multiply the clock face as infinite.
ENDTEXT
Messagebox(m.myvar,0+32+4096,"Summary help")
Endproc
Enddefine
*
*-- EndDefine: yclock
In this code the clock face is an image with only graduations.can find tons on web and adapt it.
the image is resized in code to fit the canvas (can adapt to have a good render).
in the images below i shipped 3 pictures for that purpose.Download them and use with the code.
can customize here:
-the minutes and hours needles colors
-the background of the canvas and the body.(3 backgrounds as patterns or multi gradients)
the code links to jquery.js library by the web (internet must be connected).can also download the js library file and work locally.
*2*
Local m.yrep,m.x,m.y,xpict,xcolor,ycol,myvar
m.yrep=Addbs(Justpath(Sys(16,1)))
m.xpict=Getpict()
If Empty(m.xpict)
Return .F.
Endi
m.xpict=Strtran(m.xpict,"\","/")
m.x=Int(Val(Inputbox("background gradient (1)-(2)-(3)","","1")))
If ! Between(m.x,1,3)
m.x=1
Endi
m.xcolor=Getcolor()
If m.xcolor=-1
m.ycol="gold"
Else
m.ycol="#"+Chrtran("123456","563412",;
Right(Trans[m.xcolor ,"@0" ],6))
Endi
Do Case
Case m.x=1
TEXT to m.y noshow
background:
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
background-color: #300;
background-size: 100px 100px;
ENDTEXT
Case m.x=2
TEXT to m.y noshow
background: linear-gradient(to right, lime, orange, yellow,red , cyan, bisque, violet);
ENDTEXT
Case m.x=3
TEXT to m.y noshow
background-color:black;
background-image:
radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
ENDTEXT
Endcase
TEXT to m.myvar textmerge noshow
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>HTML5 Clocks | Script Tutorials</title>
<style>
*{
margin:0;
padding:0;
}
body {
color:#fff;
font:14px/1.3 Arial,sans-serif;
<<m.y>>
}
.clocks {
height: 600px;
margin: 25px auto;
position: relative;
width: 600px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
// inner variables
var canvas, ctx;
var clockRadius = 250;
var clockImage;
// draw functions :
function clear() { // clear canvas function
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function drawScene() { // main drawScene function
clear(); // clear canvas
// get current time
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
hours = hours > 12 ? hours - 12 : hours;
var hour = hours + minutes / 60;
var minute = minutes + seconds / 60;
// save current context
ctx.save();
// draw clock image (as background)
ctx.drawImage(clockImage, 0, 0, 500, 500);
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.beginPath();
// draw numbers
ctx.font = '36px Arial';
ctx.fillStyle = '<<m.ycol>>'; //gold';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
for (var n = 1; n <= 12; n++) {
var theta = (n - 3) * (Math.PI * 2) / 12;
var x = clockRadius * 0.7 * Math.cos(theta);
var y = clockRadius * 0.7 * Math.sin(theta);
ctx.fillText(n, x, y);
}
// draw hour
ctx.save();
var theta = (hour - 3) * 2 * Math.PI / 12;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-15, -5);
ctx.lineTo(-15, 5);
ctx.lineTo(clockRadius * 0.5, 1);
ctx.lineTo(clockRadius * 0.5, -1);
ctx.fill();
ctx.restore();
// draw minute
ctx.save();
var theta = (minute - 15) * 2 * Math.PI / 60;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-15, -4);
ctx.lineTo(-15, 4);
ctx.lineTo(clockRadius * 0.8, 1);
ctx.lineTo(clockRadius * 0.8, -1);
ctx.fill();
ctx.restore();
// draw second
ctx.save();
var theta = (seconds - 15) * 2 * Math.PI / 60;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-15, -3);
ctx.lineTo(-15, 3);
ctx.lineTo(clockRadius * 0.80, 1);
ctx.lineTo(clockRadius * 0.80, -1);
ctx.fillStyle = '#0f0';
ctx.fill();
ctx.restore();
ctx.restore();
}
// initialization
$(function(){
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
// var width = canvas.width;
// var height = canvas.height;
clockImage = new Image();
clockImage.src = '<<m.xpict>>';
ctx.drawImage(clockImage,0,0,canvas.width,canvas.height); //clock face image resized to fit the canvas bounds (to adjust)
setInterval(drawScene, 1000); // loop drawScene
});
</script>
</head>
<body scroll="no" oncontextmenu="window.close();return false;" ><br><br><br><br>
<center><div class="clocks">
<canvas id="canvas" width="500" height="500"></canvas>
</div></center>
</body>
</html>
ENDTEXT
Set Safe Off
m.lcdest=m.yrep+"ytest.html"
=Strtofile(m.myvar,m.lcdest)
apie=Newobject("internetexplorer.application")
Declare Integer BringWindowToTop In user32 Integer
With apie
.Navigate(m.lcdest)
.menubar=0
.Toolbar=0
.StatusBar=0
.fullscreen=1
BringWindowToTop(.HWnd)
.Visible=.T.
Endwith
Download one of these clock faces and use it with the code above.Can install any similar face png .
Better use transparent PNG for clock face.
this code draws a clock with
-custom needles and digits color
-custom background picture of the clock
-custom body background as gradient-image(no image)
*3*
Local m.yrep,myvar,m.xpict,m.colNumbers,m.colNeedles
m.yrep=Addbs(Justpath(Sys(16,1)))
Messagebox("Color hours digits",0+32+4096,"",1000)
m.xcolor=Getcolor()
If m.xcolor=-1
m.colNumbers="gold"
Else
m.colNumbers="#"+Chrtran("123456","563412",Right(Trans[m.xcolor ,"@0" ],6)) &&&1-12
Endi
Messagebox("Color 3 needles (hh,mi,sec)",0+32+4096,"",1000)
m.xcolor=Getcolor()
If m.xcolor=-1
m.colNeedles="gold"
Else
m.colNeedles="#"+Chrtran("123456","563412",Right(Trans[m.xcolor ,"@0" ],6)) &&hours,min,seconds
Endi
Messagebox("get a bacjground clock picture",0+32+4096,"",1000)
m.xpict=Getpict() &&clock background picture
If Empty(m.xpict)
Return .F.
Endi
m.xpict=Strtran(m.xpict,"\","/")
*body background 1-2-3
m.x=Int(Val(Inputbox("background gradient (1)-(2)-(3)","","1")))
If ! Between(m.x,1,3)
m.x=1
Endi
Do Case
Case m.x=1
TEXT to m.y noshow
background:
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
background-color: #300;
background-size: 100px 100px;
ENDTEXT
Case m.x=2
TEXT to m.y noshow
background: linear-gradient(to right, lime, orange, yellow,red , cyan, bisque, violet);
ENDTEXT
Case m.x=3
TEXT to m.y noshow
background-color:black;
background-image:
radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
ENDTEXT
Endcase
TEXT to m.myvar textmerge noshow
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>HTML5 Clocks </title>
<style>
.body{
<<m.y>>
}
</style>
<body class="body" scroll="no" oncontextmenu="window.close();return false;" >
<br><br><br><br>
<center><div >
<canvas id="ycanvas1" width="500" height="500"></canvas>
</div></center>
<script>
//set a background image
var background = new Image();
background.src = "<<m.xpict>>"; //"http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg";
// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function(){
canvas.getContext("2d").drawImage(background,0,0,canvas.width,canvas.height);
}
var DrawClockHand = function(cv) {
if( !cv.getContext ) return null;
this._cv = cv;
this._ctx = cv.getContext('2d');
this.TIME = 1000;
this._r = 50;
}
DrawClockHand.prototype.setPosition = function(x,y) {
x = x || 0;
y = y || 0;
this._x = x;
this._y = y;
}
DrawClockHand.prototype.toPosition = function() {
this._ctx.translate(this._x, this._y);
}
DrawClockHand.prototype.setRadius = function(r) {
this._r = r;
}
DrawClockHand.prototype.run = function() {
var that = this;
(function() {
var now = new Date();
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
var hDeg = 360/12*hour;
var mDeg = 360/60*min;
var sDeg = 360/60*sec;
//???canvas??????
that._ctx.save();
//?????
that._ctx.beginPath();
that._ctx.clearRect(0,0,that._cv.width,that._cv.height);
canvas.getContext("2d").drawImage(background,0,0,canvas.width,canvas.height);
//ybackground();
//???????
that.toPosition();
//??????
that.drawDot();
//??????
that.drawMemory(30,that._r);
//?????
that.drawNumber();
//????? (??,??,??)
that.setHand(hDeg,that._r*0.6,6);
//????? (??,??,??)
that.setHand(mDeg,that._r*0.8,4);
//????? (??,??,??)
that.setHand(sDeg,that._r,2);
//canvas????????
that._ctx.restore();
setTimeout(arguments.callee, that.TIME);
})();
}
DrawClockHand.prototype.drawNumber = function() {
for( var i=1; i<=12; i++ ) {
this._ctx.save();
this._ctx.font="28px Bold Verdana";
this._ctx.fillStyle = '<<colnumbers>>'; //'#111';
this._ctx.rotate((360/12*i)*Math.PI/180);
this._ctx.translate(0,-(this._r+20));
this._ctx.rotate(-((360/12*i)*Math.PI/180));
this._ctx.textAlign = 'center';
this._ctx.fillText(i,0,0);
this._ctx.restore();
}
}
DrawClockHand.prototype.setHand = function(deg,size,base) {
size = size || 40;
base = base || 4;
deg = deg || 0;
this._ctx.save();
//shadow???
this._ctx.shadowColor = 'rgba(0,0,0,0.5)';
this._ctx.shadowOffsetX = 1;
this._ctx.shadowOffsetY = 1;
this._ctx.shadowBlur = 2;
this._ctx.rotate(deg*Math.PI/180);
//??????
this._ctx.fillStyle = '#111';
this.draw(size,base);
this._ctx.restore();
}
DrawClockHand.prototype.draw = function(size,base) {
size = size || 40;
base = base || 4;
this._ctx.save();
this._ctx.fillStyle = '<<colneedles>>';
this._ctx.translate(-base/2, 0);
this._ctx.moveTo(0, 0);
this._ctx.lineTo(base/2, -size);
this._ctx.lineTo(base, 0);
this._ctx.closePath();
this._ctx.fill();
this._ctx.restore();
}
DrawClockHand.prototype.dp = function(w,h) {
this._ctx.save();
this._ctx.beginPath();
//??????????
this._ctx.fillStyle = '#111';
//????????rect???????
this._ctx.translate(-w/2,0);
this._ctx.fillRect(0,0,w,h);
this._ctx.restore();
}
DrawClockHand.prototype.drawMemory = function(deg,r) {
r = r || 50;
deg = deg || 45;
for( var i=0; i<360; i+=deg) {
this._ctx.save();
this._ctx.beginPath();
//rotate????????????
this._ctx.rotate(i*Math.PI/180);
this._ctx.translate(0,r);
if( i%90 == 0 ) {
this.dp(3,7);
} else {
this.dp(1,5);
}
this._ctx.restore();
}
}
DrawClockHand.prototype.drawDot = function() {
var pos = -(this._r*0.05);
/* ????????????????????? */
var grad = this._ctx.createRadialGradient(pos,pos,0,pos,pos,10);
grad.addColorStop(0,'#ddd');
grad.addColorStop(1,'#555');
this._ctx.fillStyle = grad;
//shadow???
this._ctx.shadowColor = 'rgba(0,0,0,0.4)';
this._ctx.shadowOffsetX = 1;
this._ctx.shadowOffsetY = 1;
this._ctx.shadowBlur = 1;
this._ctx.arc(0,0,this._r*0.07, 0, Math.PI*2, true);
this._ctx.fill();
}
var canvas = document.getElementById('ycanvas1');
canvas.style.border="solid 4px";
canvas.style.color="maroon";
var dch = new DrawClockHand(canvas);
dch.setPosition(canvas.width/2, canvas.height/2);
dch.setRadius(170);
dch.run();
</script>
</body>
</html>
ENDTEXT
Set Safe Off
m.lcdest=m.yrep+"ytest.html"
=Strtofile(m.myvar,m.lcdest)
apie=Newobject("internetexplorer.application")
Declare Integer BringWindowToTop In user32 Integer
With apie
.Navigate(m.lcdest)
.menubar=0
.Toolbar=0
.StatusBar=0
.fullscreen=1
BringWindowToTop(.HWnd)
.Visible=.T.
Endwith
*_Cliptext=m.myvar &&capture the code
