HTML5 menggunakan kaedah drawImage() untuk melukis petua tutorial images_html5

1. Lukis imej

Gunakan kaedah drawImage() untuk melukis imej. Persekitaran lukisan menyediakan tiga versi berbeza kaedah ini.
drawImage(imej,x,y): Lukis imej di (x,y) dalam kanvas.
drawImage(imej,x,y,width,height): Lukis imej pada (x,y) dalam kanvas dan skalakannya mengikut lebar dan tinggi yang ditentukan.
lukisImej (imej, sumber Dan lukiskannya pada (x,y) dalam kanvas.

2. tag

Sebelum melukis imej, anda perlu memuatkan imej ke dalam penyemak imbas. Di sini kami hanya menambah teg



3 Lukis gambar

Salin kodKod tersebut adalah seperti berikut:

>
/javascript" charset = "utf-8">
//Fungsi ini akan dipanggil selepas halaman dimuatkan sepenuhnya.
function pageLoaded()
{
//Dapatkan rujukan kepada canvas object. Ambil perhatian bahawa nama tCanvas mestilah sama dengan yang berikut Id dalam kandungan adalah sama
var canvas = document.getElementById('tCanvas');//Dapatkan persekitaran lukisan 2D kanvas
konteks var = canvas.getContext('2d');
//Dapatkan rujukan objek imej
var image = document.getElementById('tkjpg'); imej di (0,50)
context.drawImage(imej,0,50); /2);
//Lukis sebahagian daripada imej (potong 0.7 dari sudut kiri atas imej) )
context.drawImage(imej,0,0,0.7*165,0.7*86,300,70, 0.7*165,0.7*86);
}

< lebar kanvas = "500" tinggi = "200" id = "tCanvas" style = "border:black 1px solid;" >

Petua: Penyemak imbas anda tidak menyokong teg
>



4 kesan lukisan


5