Artikel ini terutama memperkenalkan kanvas HTML5 untuk menggambar garis putus -putus. HTML5 tidak menyediakan metode untuk menggambar garis putus -putus. Artikel ini dimodifikasi berdasarkan metode Stack Overflow. Teman yang membutuhkannya bisa merujuknya.
HTML5 Canvas menyediakan banyak fungsi untuk menggambar grafik, tetapi sayangnya, Canvas API hanya menyediakan fungsi untuk menggambar garis solid (lineto), tetapi tidak menyediakan metode untuk menggambar garis putus -putus. Desain seperti itu terkadang dapat menyebabkan ketidaknyamanan yang luar biasa. David Flanagan, penulis panduan otoritatif untuk JavaScript, percaya bahwa keputusan seperti itu bermasalah, terutama ketika modifikasi dan implementasi standar relatif sederhana (... sesuatu yang sangat sepele untuk ditambahkan ke spesifikasi dan begitu sepele untuk diimplementasikan ... Saya benar -benar berpikir Anda membuat kesalahan di sini —Http: //lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-may/011224.html).
Pada Stack Overflow, Phrogz menyediakan implementasi garis putus-putus (http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas), yang secara ketat adalah implementasi garis putus-putus (PS Saya pikir versi yang disederhanakan dari Rod MacDougal pada halaman ini lebih baik). Jadi, apa yang harus saya lakukan jika saya perlu menggambar garis putus -putus (seperti yang ditunjukkan pada gambar di bawah)?
Berikut ini adalah implementasi saya sendiri, yang hanya mendukung menggambar garis titik horisontal dan vertikal. Anda dapat merujuk pada metode Phrogz dan Rod MacDougall untuk menambahkan fungsi gambar slash.
Salin kode