Ciri baharu Html5: gunakan teg kanvas untuk melukis berbilang garis lurus dengan tangkapan skrin kemahiran tutorial effect

Contoh berikut menggunakan teg kanvas untuk melukis berbilang garis lurus

Salin kod Kodnya adalah seperti berikut: index_three ="text/javascript" src="js/index.js"/> tag. //Dapatkan objek Canvas (kanvas) var canvas = document.getElementById("myCanvas"); //Cukup mengesan sama ada penyemak imbas semasa menyokong objek Canvas untuk mengelakkan ralat sintaks dalam sesetengah penyemak imbas yang tidak menyokong HTML5 if(canvas.getContext){ //Dapatkan objek CanvasRenderingContext2D yang sepadan (berus ) var ctx = canvas.getContext("2d"); //Warna garisan ctx.strokeStyle="#FF9933" //Lebar garisan dalam piksel ctx sudut kanvas Kanvas ialah asal (0,0) , koordinat mendatar di sebelah kanan, koordinat menegak adalah ke arah bawah, dan unitnya ialah piksel (px). //Mulakan laluan lukisan baharu ctx.beginPath(); //Tentukan koordinat titik permulaan bagi garis lurus sebagai (10,10) ctx.moveTo(50, 50) ; //Takrifkan koordinat titik akhir bagi garis lurus sebagai (50,10) ctx.lineTo(350, 250); lineTo(360, 60); ctx.moveTo(50, 200); ctx.lineTo(300, 40); ctx.stroke(); //Tutup laluan lukisan semasa ctx.closePath(); /html>