కాంస్క్రైన్ drawImage() పద్ధతి

కాన్వాస్ పరిచయం

నిర్వచనం మరియు ఉపయోగం

drawImage() మాదిరిగా, కాంస్క్రైన్ పైన చిత్రాన్ని, కాంస్క్రైన్ లేదా వీడియోను చిత్రించడానికి ఉపయోగించబడుతుంది.

drawImage() మాదిరిగా, చిత్రం యొక్క కొన్ని భాగాలను చిత్రించడానికి లేదా చిత్రం యొక్క పరిమాణాన్ని పెంచడానికి లేదా తగ్గించడానికి కూడా మాదిరిగా మార్గాలు ఉన్నాయి.

ఉదాహరణ

ఉదాహరణ 1

ఉపయోగించాల్సిన చిత్రం:

ట్యూలిప్

కాంస్క్రైన్ పైన చిత్రాన్ని చిత్రించండి:

Your browser does not support the HTML5 canvas tag.

JavaScript:

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

亲自试一试

సూచన:మరిన్ని ఉదాహరణలు పేజీ తలలో లభిస్తాయి.

సంకేతాలు

జావాస్క్రిప్ట్ సంకేతాలు 1

కాంస్క్రైన్ పైన చిత్రాన్ని నిర్ధారించండి:

context.drawImage(img,x,y);

జావాస్క్రిప్ట్ సంకేతాలు 2

కాంస్క్రైన్ పైన చిత్రాన్ని నిర్ధారించి, చిత్రం వెడల్పు మరియు పొడవును నిర్ధారించండి:

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

జావాస్క్రిప్ట్ సంకేతాలు 3

కాంస్క్రైన్ పైన కాపీయుట్ చేసి, కాంస్క్రైన్ పైన కాపీయుట్ భాగాన్ని నిర్ధారించండి:

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

పారామీటర్ విలువ

పారామీటర్ 描述
img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度。（伸展或缩小图像）
height 可选。要使用的图像的高度。（伸展或缩小图像）

更多实例

例子 2

在画布上对图像进行定位，然后规定图像的宽度和高度：

Your browser does not support the 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);

亲自试一试

例子 3

剪切图片，并在画布上对被剪切的部分进行定位：

Your browser does not support the 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);

亲自试一试

例子 4

要使用的视频（请按下播放键以开始演示）：

画布：

Your browser does not support the HTML5 canvas tag.

JavaScript （每 20 毫秒，代码就会绘制视频的当前帧）：

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 以及更早的版本不支持 元素。

కాన్వాస్ పరిచయం