హెచ్టిఎంఎల్ కాన్వెక్స్ స్కేల్ () మాథ్యాడ్
నిర్వచనం మరియు ఉపయోగం
scale() ప్రస్తుత డ్రాయింగ్ ను పెద్దగా లేదా చిన్నగా స్కేల్ చేసే మార్గం.
ప్రకటనలు:మీరు డ్రాయింగ్ ను స్కేల్ చేస్తే, తరువాత చేసిన అన్ని డ్రాయింగ్స్ కూడా స్కేల్ అవుతాయి. స్థానం కూడా స్కేల్ అవుతుంది. మీరు వ్రాయాలి scale(2,2)అప్పుడు, డ్రాయింగ్ క్యాన్వాస్ పైభాగానికి రెండు రెట్లు దూరంలో స్థానాన్ని నిర్ధారించబడుతుంది.
ఉదాహరణ
ఉదాహరణ 1
రెండు సార్లు డ్రాయింగ్ చేయండి: రెండు రెట్లు పెద్దగా మలచండి మరియు మరొకసారి డ్రాయింగ్ చేయండి:
జావాస్క్రిప్ట్:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
సూచన:పేజీ కింది మరిన్ని ఉదాహరణలు అందుబాటులో ఉన్నాయి.
సంకేతం
context.scale(scalewidth,scaleheight);
పారామీటర్ విలువ
| పారామీటర్స్ | వివరణ |
|---|---|
| scalewidth | ప్రస్తుత డ్రాయింగ్ వెడల్పును స్కేల్ చేయండి (1=100%, 0.5=50%, 2=200%, మరియు ఇలా మరొకటి). |
| scaleheight | ప్రస్తుత డ్రాయింగ్ అడుగున పొడవును స్కేల్ చేయండి (1=100%, 0.5=50%, 2=200%, మరియు ఇలా మరొకటి). |
మరిన్ని ఉదాహరణలు
ఉదాహరణ 2
ఒక రెక్టాంగులు దోరండి; 200% పెద్దదిగా మార్చండి మరియు మళ్ళీ రెక్టాంగులు దోరండి; 200% పెద్దదిగా మార్చండి మరియు మళ్ళీ రెక్టాంగులు దోరండి; 200% పెద్దదిగా మార్చండి మరియు మళ్ళీ రెక్టాంగులు దోరండి:
జావాస్క్రిప్ట్:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
బ్రౌజర్ మద్దతు
ఈ పట్టికలో గింతలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ సంస్కరణను పేర్కొన్నారు.
| చ్రోమ్ | ఎడ్జ్ | ఫైర్ఫాక్స్ | సఫారీ | ఆపెరా |
|---|---|---|---|---|
| చ్రోమ్ | ఎడ్జ్ | ఫైర్ఫాక్స్ | సఫారీ | ఆపెరా |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
ప్రకటనలు:ఇంటర్నెట్ ఎక్స్ప్లోరర్ 8 మరియు ఆగమించిన సంస్కరణలు <canvas> కొడ్డంటే మద్దతు ఇవ్వలేదు.
