تفاوت مختصات به دست آمده در canvas

Question

joker 9 سال پیش 9 سال پیش

0 0

سلام دوستان

من با استفاده از canvas یه دایره رسم می کنم به شکل زیر

<canvas id="test" width="300px" height="300px"></canvas>

var canvas = document.getElementById('test');
var context = canvas.getContext('2d');
var x= canvas.width / 2;
var y = canvas.height / 2;
var radius = 80;

context.beginPath();
context.strokeStyle = '#000000';
context.arc(x, y, radius, 0, 360, false);
context2.stroke();

وقتی که می خوام مختصات مرکز دایره رو با استفاده از موس بگیرم با این کد:

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

مختصات رو جز اون چیزی که خودم ست کردم  بهم میده.منظورم طول و ارتفاع تقسیم بر 2 هستش

var x= canvas.width / 2; //          300/2=150
var y = canvas.height / 2;//         300/2=150

Answer 1

پاسخ به سوال

joker 9 سال پیش

0 0

پاسخ صحیح

جواب رو پیدا کردم

وقتی که

x= canvas.width / 2

قرار می گذاریم به معنی پهنایی هست که با css به اون دادیم نه پهنایی که با attribute به canvas دادیم

Answer 2

پاسخ صحیح

جواب رو پیدا کردم

وقتی که

x= canvas.width / 2

قرار می گذاریم به معنی پهنایی هست که با css به اون دادیم نه پهنایی که با attribute به canvas دادیم