Halo, teman -teman terkasih, saya membenci bagian depan diri saya, menulis blog untuk pertama kalinya, dan jangan menulis dengan baik, tolong maafkan saya untuk mengerti.
Sebelum mengajar, saya pikir Anda cerdas. dengan itu di sini;
Baik! Gambar di bawah ini adalah efek sederhana setelah penyelesaian kami.
1. Tentukan kanvasPertama -tama, kami sekarang memasukkan tag <canvas> dalam file html untuk menentukan ukuran kanvas. Pada saat yang sama, warna latar belakang kanvas diatur dalam tabel gaya internal (untuk ditonton saat nyaman untuk menggambar);
<! Canvas {background:#5151a2;} </style> </head> <body> <canvas id = canvas width = 800 tinggi = 600> </body> </html>Inti berikutnya adalah menggambar kincir angin di lingkungan JS asli; Grafik 2D di kanvas;
<type skrip = text/javascript> // Dapatkan konteks 2D untuk mendapatkan kanvas.2. Gambarlah dasar kincir angin
Sosok geometris dari dasar kincir angin terlihat seperti trapesium yang ramping dan ramping. Lihat langsung pada kode ~~!
// Tentukan fungsi, dasar bawah fungsi kemasan windmill () {ctx.beginpath (); (0,#CCC); = liner; // Metode pengisian trapesium diatur ke variabel (warna gradien) ctx.moveto (395.300); Garis awal ctx.lineto (410.600);Mari kita lihat efeknya di halaman, apakah itu sederhana?
(Saya merasa saya terlalu banyak ~! ~!)
3. Gambarlah daunnyaBagian selanjutnya akan menjadi tempat paling kritis dalam animasi ini. mungkin juga ada di hati Anda. Bagaimana seharusnya bentuk daun ditarik? Bisakah daun disalin dan ditempelkan? Jawabannya tentu baik -baik saja, mari kita lakukan!
Analisis Berpikir:
1) Karena bentuk tiga daun persis sama, kita hanya perlu menggambar daun. Sebut saja fungsi Bind ()! Persimpangan Sebut saja! Mengapa! TM Anda terlalu pintar
2) Daun memiliki hati bundar. Metode translate () digunakan di sini, sistem koordinat seluler!
3) Poin tersulit adalah memahami bagaimana animasi diwujudkan di sini, karena prinsip animasi akan mempengaruhi struktur dokumen lukisan kita: struktur daun:
Pertama -tama, kami menciptakan lingkungan gambar baru, kami menyebutnya lingkungan 1, kami menarik daun pertama di lingkungan 1; Memanggil daun pada sisi atas (), gambar dua daun; ;
Jika kita ingin mencapai animasi, kita hanya perlu memutar lingkungan gambar 1 dari daun pertama. Persimpangan Barrage: 6666666
4) Pada akhirnya, beberapa gaya penampilan dasar didebug! Seperti gradien, transparansi, dll!
Gambarlah daunnyaKetika saya melukis bentuk daun ini, perlahan -lahan debug.
Di sini saya mendeklarasikan variabel var num = 0 ;, sebagai parameter perubahan dalam jumlah rotasi lingkungan: Kemudian mari kita lihat kode secara langsung! Persimpangan Persimpangan
Var num = 0; , rotasi sistem koordinat ctx.rotate ((math.pi/180)*num); Liner1.addcolorsstop (0,#ccc); pertama kali ctx.beginpath (); berputar 120 ° CTX.SAVE (); 120); // Balas keadaan kedua (sistem koordinat berputar) // gambar ctx.beginpath (); CCC); Sistem Koordinat Terjemahan) NUM+= 5; // ************************** 这个 num 使得环境 1 的旋转角度在不停的变化 ， ****** ************************************ ********************************************** ********************************************** ********************************************** *****************, setiap daun adalah kode yang diulang, berikut adalah fungsi pengemasan fungsi () {ctx.moveto (0,0); 30, 12); 12,30,12); 4. Atur animasiBagian animasi ini relatif sederhana. Persimpangan Persimpangan
SetInterval (function () {ctx.clearrect);}, 50);Kode Sumber: https://github.com/224137748/canvas/blob/master/windmill.html
Di atas adalah semua isi artikel ini.