HTML canvas setTransform() మాథ్యూర్
నిర్వచన మరియు ఉపయోగం
కాన్వాస్ పై ప్రతి వస్తువుకు ప్రస్తుత మార్పు మాట్రిక్స్ ఉంది.
setTransform() మార్పు మాట్రిక్స్ ను యూనిట్ మాట్రిక్స్ గా మళ్ళిస్తుంది మరియు అదే పరామీతులతో మళ్ళించి అమలు చేస్తుంది. transform().
లేదా మాటలో, setTransform() మీరు ప్రస్తుత పరిసరాన్ని పెద్దదిచేయడం, చుట్టూ తిరిగించడం, చేతనం చేయడం మరియు కొంచంచా చేతనం చేయడం అనేది అనుమతిస్తుంది.
నోట్స్:ఈ మార్పు మాట్రిక్స్ setTransform() పిలిచిన తర్వాత మాత్రమే చిత్రీకరణను ప్రభావితం చేస్తుంది.
ఉదాహరణ
ఒక చతురస్రాకారాన్ని చిత్రీకరించండి, setTransform() ను మళ్ళించి కొత్త మార్పు మాట్రిక్స్ సృష్టించండి, మళ్ళించి కొత్త మార్పు మాట్రిక్స్ సృష్టించండి, అప్పుడు మళ్ళించి చతురస్రాకారాన్ని చిత్రీకరించండి. మీరు setTransform() ను పిలిచినప్పుడు, అది మునుపటి మార్పు మాట్రిక్స్ ను మళ్ళిస్తుంది మరియు కొత్త మాట్రిక్స్ ను నిర్మిస్తుంది అని గమనించండి. ఈ ఉదాహరణలో, ఎరుపు చతురస్రాకారం కనిపించదు కాబట్టి, అది నీలి చతురస్రాకారం కింద ఉంది అని గమనించండి:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
సింథెక్స్
context.setTransform(a,b,c,d,e,f);
పారామీటర్ విలువలు
| పారామీటర్లు | వివరణ |
|---|---|
| a | అడుగుతో చిత్రాన్ని చేరుకుడు |
| b | అడుగుతో చిత్రాన్ని చేరుకుడు |
| c | నిలువుతో చిత్రాన్ని చేరుకుడు |
| d | నిలువుతో చిత్రాన్ని మొత్తం చెరుకుడు |
| e | అడుగుతో చిత్రాన్ని గీయడం |
| f | నిలువుతో చిత్రాన్ని గీయడం |
బ్రౌజర్ మద్దతు
పట్టికలో నంబర్లు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ సంస్కరణను గుర్తు చేయబడినవి.
| క్రోమ్ | ఎడ్జ్ | ఫైర్ఫాక్స్ | సఫారీ | ఆపెరా |
|---|---|---|---|---|
| క్రోమ్ | ఎడ్జ్ | ఫైర్ఫాక్స్ | సఫారీ | ఆపెరా |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
నోట్స్:Internet Explorer 8 మరియు ఆగాగ్రహాలు మరియు ఆగాగ్రహాలు <canvas> అంశాన్ని మద్దతు చేయవు.
