Canvas drawImage() Method

Canvas 参考手册

Ufafanuzi na Matumizi

drawImage() Method inayoweza kuandaa picha kwenye rangi ya picha, rangi ya picha au video.

drawImage() Method inayoweza kuandaa sehemu za picha, na/au kuongeza au kurejesha ukubwa wa picha.

Mfano

Mfano 1

Picha inayotumika:

tulip

Kuandaa picha kwenye rangi ya picha:

Kivinjuzi chako haikubali kina HTML5 canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);

亲自试一试

Maelezo:Mfano zaidi inapatikana kwenye misingi ya mawaka.

Injia

JavaScript Injia 1

Kuingia picha kwenye rangi ya picha:

context.drawImage(img,x,y);

JavaScript Injia 2

Kuingia picha kwenye rangi ya picha, na kumekua uwezo na ukubwa wa picha:

context.drawImage(img,x,y,width,height);

JavaScript Injia 3

Kivunguza picha, na kuingia kwa eneo kwenye rangi ya picha:

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

参数值

参数 Kuhusu
img Inadaiwa. Picha, maktaba ama video unaotumika.
sx Chaguo. Kuanzia x na picha unaoshaa.
sy Chaguo. Kuanzia y na picha unaoshaa.
swidth Chaguo. Uwingu wa picha unaoshaa.
sheight Chaguo. Uwingu wa picha unaoshaa.
x Pozisheni ya x na eneo la picha kwenye maktaba.
y Pozisheni ya y na eneo la picha kwenye maktaba.
width Chaguo. Uwingu wa picha unaotumika. (Uingiza ama uhariri picha)
height Chaguo. Uwingu wa picha unaotumika. (Uingiza ama uhariri picha)

Mafanikio mengi

Mfano 2

Kuagiza picha kwenye maktaba, na kuwa kwa uwanja wa picha na keni:

Kivinjuzi chako haikubali kina HTML5 canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10,240,160);

亲自试一试

Mfano 3

Kigeuka picha, na kuagiza eneo linalosha kwenye maktaba:

Kivinjuzi chako haikubali kina HTML5 canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,90,130,90,80,20,20,90,80);

亲自试一试

Mfano 4

Video yenye uzungumzini (taabia bonyeza kichwa cha kwanza kuanzisha mawasiliano):

Maktaba:

Kivinjuzi chako haikubali kina HTML5 canvas tag.

JavaScript （kila kilichoteni 20 ms, kipindiwa kwa uhariri video kwa uwanja wa hivi karibuni）：

var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play',function() {var i=window.setInterval(function() 
{ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);

亲自试一试

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

注释：Internet Explorer 8 以及更早的版本不支持 元素。

Canvas 参考手册