第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

如何在縮放畫布中獲取像素范圍?

如何在縮放畫布中獲取像素范圍?

開滿天機(jī) 2021-10-21 15:02:28
在下面的代碼中,我在中心畫了一個(gè)圓,但是因?yàn)樗强s放的,所以這個(gè)圓在右下角!var canvas = document.getElementById('mycanvas');context = canvas.getContext("2d");context.canvas.width = 400;context.canvas.height = 200;context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvasvar scale = 2;context.scale(scale, scale);context.beginPath();context.fillStyle = "#ff2626"; // Red colorcontext.arc(context.canvas.width / 2, context.canvas.height / 2, 10, 0, Math.PI * 2); //centercontext.fill();context.closePath();canvas {        border: solid 1px #ccc;}<HTML><body><canvas id="mycanvas"></canvas></body></HTML>您可能知道,畫布的寬度和高度與在其中繪制的內(nèi)容無(wú)關(guān),尤其是在縮放時(shí)。換句話說(shuō),當(dāng)您使用context.scale(scale_x, scale_y);它縮放畫布時(shí),它將縮放畫布內(nèi)的所有形狀。我想知道,有沒有辦法獲得畫布像素范圍?我想知道縮放畫布時(shí)左邊緣和右邊緣的 X 以及頂部和底部邊緣的 Y。
查看完整描述

3 回答

?
RISEBY

TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超5個(gè)贊

將坐標(biāo)除以scale應(yīng)該可以解決問題:


var canvas = document.getElementById('mycanvas');

context = canvas.getContext("2d");

context.canvas.width = 400;

context.canvas.height = 200;


context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas


var scale = 2;

context.scale(scale, scale);

context.beginPath();

context.fillStyle = "#ff2626"; // Red color

context.arc(context.canvas.width /2/scale, context.canvas.height / 2/scale, 10, 0, Math.PI * 2); //center

context.fill();

context.closePath();

canvas {

        border: solid 1px #ccc;

}

<HTML>

<body>


<canvas id="mycanvas"></canvas>


</body>

</HTML>

順便說(shuō)一句,context.canvas.width /(2*scale)比 更干凈context.canvas.width /2/scale,但我保持這樣只是為了顯示除以scale.


查看完整回答
反對(duì) 回復(fù) 2021-10-21
?
冉冉說(shuō)

TA貢獻(xiàn)1877條經(jīng)驗(yàn) 獲得超1個(gè)贊

你必須考慮你的比例所以 ex (width/2)/scale


var canvas = document.getElementById('mycanvas');

context = canvas.getContext("2d");

context.canvas.width = 400;

context.canvas.height = 200;


context.clearRect(context.canvas.width, context.canvas.height, context.canvas.width, context.canvas.height); // Clears the canvas


var scale = 2;

context.scale(scale, scale);

context.beginPath();

context.fillStyle = "#ff2626"; // Red color

context.arc((context.canvas.width/2)/scale , (context.canvas.height/2)/scale, 10, 0, Math.PI * 2); //center

context.fill();

context.closePath();

canvas {

        border: solid 1px #ccc;

}

<HTML>

<body>


<canvas id="mycanvas"></canvas>


</body>

</HTML>


查看完整回答
反對(duì) 回復(fù) 2021-10-21
  • 3 回答
  • 0 關(guān)注
  • 168 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)