Saya telah mempelajari elemen kanvas di HTML5 sebelumnya, dan untuk berlatih tangan saya, saya menyadari jam sederhana. Jam itu sendiri tidak rumit dan tidak dipercantik menggunakan gambar. Namun, meskipun burung pipitnya kecil, saya akan membagikannya kepada Anda di bawah ini:
Efek demonstrasi:
Kode HTML:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> jam </iteme>
<type style = "text/css">
*{
Margin: 0;
Padding: 0;
}
.kanvas{
margin-kiri: 20px;
margin-top: 20px;
Perbatasan: Solid 1px;
}
</tyle>
</head>
<body onload = "main ()">
<canvas class = "canvas" id = "canvasid" width = '500px' height = '400px'> </canvas>
<script type = "text/javascript" src = "clock.js"> </ptript>
</body>
</html>
Kode JS:
Salinan kode adalah sebagai berikut:
var canvas = {};
Canvas.cxt = document.getElementById ('canvasid'). GetContext ('2d');
Canvas.point = function (x, y) {
this.x = x;
this.y = y;
};
/* Hapus semua grafik di kanvas*/
Canvas.clearcxt = function () {
var me = ini;
var canvas = me.cxt.canvas;
me.cxt.clearrect (0,0, canvas.offsetwidth, canvas.offsetheight);
};
/*jam*/
Canvas.clock = function () {
var me = kanvas,
c = me.cxt,
radius = 150, /*radius* /
skala = 20, /*skala panjang* /
minangle = (1/30)*math.pi,/*ray satu menit*/
hourangle = (1/6)*math.pi,/*ray satu jam*/
hourhandlength = radius/2,/*panjang jam tangan*/
Minhandlength = Radius/3*2,/*Panjang Tangan Menit*/
SecHandlength = Radius/10*9,/*Panjang tangan kedua*/
center = Me.point baru (C.Canvas.Width/2, C.Canvas.Height/2); /*Pusat lingkaran*/
/*Gambar pusat lingkaran (tengah dial)*/
function drawcenter () {
C.Save ();
C.Translate (Center.x, Center.Y);
c.fillstyle = 'hitam';
c.beginpath ();
c.arc (0, 0, radius/20, 0, 2*math.pi);
c.closepath ();
c.fill ();
c.stroke ();
C.Restore ();
};
/*Gambarlah wajah arloji melalui transformasi koordinat*/
function lempargroundground () {
C.Save ();
C.Translate (Center.x, Center.Y); /*transformasi terjemahan*/
/*Skala gambar*/
function drawscale () {
c.moveto (radius - skala, 0);
c.lineto (radius, 0);
};
c.beginpath ();
c.arc (0, 0, radius, 0, 2*Math.pi, true);
c.closepath ();
untuk (var i = 1; i <= 12; i ++) {
drawscale ();
C.Rotate (Hourangle); /*transformasi rotasi*/
};
/*Waktu menggambar (3,6,9,12)*/
c.font = "bold 30px impack"
C.FillText ("3", 110, 10);
C.FillText ("6", -7, 120);
C.FillText ("9", -120, 10);
C.FillText ("12", -16, -100);
c.stroke ();
C.Restore ();
};
/*Menggambar tangan jam (h: waktu saat ini (sistem 24 jam)*/
this.drawhourhand = function (h) {
h = h === 0? 24: h;
C.Save ();
C.Translate (Center.x, Center.Y);
C.Rotate (3/2*Math.pi);
c.rotate (h*hamp lojange);
c.beginpath ();
C.Moveto (0, 0);
c.lineto (jam jam, 0);
c.stroke ();
C.Restore ();
};
/*Menggambar tangan menit (m: menit saat ini)*/
this.drawminhand = function (m) {
m = m === 0? 60: M;
C.Save ();
C.Translate (Center.x, Center.Y);
C.Rotate (3/2*Math.pi);
C.Rotate (M*Minangle);
c.beginpath ();
C.Moveto (0, 0);
C.Lineto (Minhandlength, 0);
c.stroke ();
C.Restore ();
};
/*Gambarlah tangan kedua: kedua saat ini)*/
this.drawsechand = function (s) {
S = S === 0? 60: S;
C.Save ();
C.Translate (Center.x, Center.Y);
C.Rotate (3/2*Math.pi);
C.Rotate (S*Minangle);
c.beginpath ();
C.Moveto (0, 0);
c.lineto (sechandlength, 0);
c.stroke ();
C.Restore ();
};
/*Menggambar jam berdasarkan waktu setempat*/
this.drawclock = function () {
var me = ini;
function draw () {
var date = new date ();
Canvas.clearcxt ();
lempenggroundground ();
drawcenter ();
me.drawhourhand (date.getHours () + date.getMinutes ()/60);
me.drawminhand (date.getMinutes () + date.getSeconds ()/60);
me.drawsechand (date.getSeconds ());
}
menggambar();
setInterval (Draw, 1000);
};
};
var main = function () {
var jam = canvas.clock () baru;
clock.drawclock ();
};
Beberapa API elemen kanvas sederhana terlibat dalam kode. Istirahat saja
Di atas adalah semua tentang artikel ini. Saya harap ini akan membantu semua orang untuk belajar kanvas.