Saya akan mengirimkan jam jelek hari ini, jujur saja
Apakah ada alat untuk men -debug kanvas? Saya selalu perlu menyegarkan efek di browser. Saya sangat lelah ~
(┬＿┬)
Kode:
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Title> dokumen </iteme> <tyle> body {latar belakang: #eee; } canvas {latar belakang: #fff; } </tyle> </head> <body> <canvas> browser Anda tidak mendukungnya, silakan upgrade ... </canvas> <audio id = "audio" src = "1.wav"> </docah script> var oaudio = document.geteLementById ("audio"); var ocas = document.geteLementsbyTagname ("canvas") [0]; var cas = ocas.getContext ("2d"); oaAudio.onTimeUpdate = function () {if (oaAudio.currenttime> 0.1) {this.pause (); }} /*Warna Grabial* / var color = cas.createradialGradient (400.400,10.400.400.200); color.addcolorstop (0, "#f1f4f5"); color.addcolorstop (1, "#c5c6c7"); setInterval(function(){ oAudio.currentTime=0; oAudio.play(); cas.clearRect(0,0,800,800); /*Draw the circle frame*/ cas.lineWidth=3; cas.shadowColor="#888"; cas.shadowOffsetX=1; cas.shadowOddsetY=1; cas.shadowBlur=5; Cas.arc (400.400.200,0, Math.pi*2, false); cas.shadowoffsetx = 0; CAS.Moveto (400+Math.cos (i*6*Math.pi/180)*200.400+Math.sin (i*6*Math.pi/180)*200); } else {cas.moveto (400+Math.cos (i*6*Math.pi/180)*200.400+Math.sin (i*6*Math.pi/180)*200); cas.lineto (400+ (200-len)*Math.cos (i*6*Math.pi/180), 400+(200-len)*Math.sin (i*6*GAMBAR/180); S = Date.getSeconds (); cas.fillstyle = "858384"; /* Fungsi jarum tangan*/fungsi (t, len, warna) {var sudut = math.pi/180; cas.beginpath (); cas.strokestyle = warna; cas.moveto (400.400); cas.lineto (400+len*math.cos ((t*6-90)*sudut), 400+len*math.sin ((t*6-90)*sudut)); cas.stroke (); } </script> </body> </html>Fokus jam ini bukan pada cara menggambarnya. Dalam fungsi trigonometri, penggunaan fungsi trigonometri terkait erat dengan sudut. Math.pi adalah π, math.sin (), math.cos (), mereka semua menerima radian, jadi mereka harus
Mengubah sudut menjadi radian. Sebelum menggambar jam, Anda harus terlebih dahulu menilai kondisi jam. Bagilah lingkaran menjadi 60 bagian, masing -masing bagian mewakili skala, dan koordinat lingkaran didasarkan pada arah positif dalam matematika. Karena itu,
Anda perlu menyesuaikan koordinat awal dan menguranginya dengan 90 derajat yang sama dengan posisi awal jam.
Sebelum mempelajari kanvas, Anda harus meninjau fungsi matematika yang telah Anda lupakan sebelumnya. Itu bukan sesuatu yang rumit untuk dilakukan. Pembelajaran kanvas adalah untuk terus mengkonfirmasi koordinat dan kemudian menghubungkannya ke baris
Akhirnya, itu ditarik ke dalam diagram, yang sama dengan titik ke garis dan garis ke permukaan dalam matematika.
Kode di atas tidak sulit untuk menggunakan garis untuk menggambar, yaitu, untuk menggunakan fungsi menggambar garis dan mengisi warna berulang kali. Oh ~ ada juga tag audio untuk menggunakannya, dan suara yang mencapai jam berdetak berdetak ~
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.