Rumah  >  Artikel  >  hujung hadapan web  >  HTML5 menggunakan kaedah drawImage() untuk melukis petua tutorial images_html5

HTML5 menggunakan kaedah drawImage() untuk melukis petua tutorial images_html5

WBOY
WBOYasal
2016-05-16 15:47:341961semak imbas

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:

>
HTML5 /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
Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn