ایچ تی ام ال کانواس کوردینات

ਕੈਂਵਾਸ ਨਿਰਦੇਸ਼ਾਂ

HTML ਕੈਂਵਾਸ ਇੱਕ ਦੋਹਰੀ ਗ੍ਰਿੱਡ ਹੈ。

ਕੈਂਵਾਸ ਦੇ ਖੱਬੇ ਉੱਪਰੀ ਕੋਣ ਦੇ ਨਿਰਦੇਸ਼ਾਂ (0,0) ਹਨ。

ਪਿਛਲੇ ਅਧਿਆਏ ਵਿੱਚ ਅਸੀਂ ਮੱਥਕ ਵਰਤੀਆਂ: fillRect(0,0,150,75)。

ਮਤਲਬ: ਖੱਬੇ ਉੱਪਰੀ ਕੋਣ (0,0) ਤੋਂ ਇੱਕ 150x75 ਪਿਕਸਲ ਦਾ ਵੱਕਰ ਦਿਖਾਓ。

ਨਿਸ਼ਾਨੇ ਮਾਮਲਾ

ਨਿਸ਼ਾਨੇ ਹੇਠ ਦਿੱਤੇ ਵੱਕਰ ਉੱਤੇ ਪਸੰਦ ਕਰੋ ਤਾਂ ਉਸ ਦੇ x ਅਤੇ y ਨਿਰਦੇਸ਼ਾਂ ਨੂੰ ਦੇਖ ਸਕੋ:

ਲਾਈਨ ਦਿਖਾਓ

ਜੇਕਰ ਤੁਸੀਂ ਕੈਂਵਾਸ 'ਤੇ ਲਾਈਨ ਦਿਖਾਉਣੀ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ: ਹੇਠ ਲਿਖੇ ਮੱਥਕ ਨੂੰ ਵਰਤੋਂ ਕਰੋ:

• moveTo(x,y) - ਲਾਈਨ ਦੇ ਸ਼ੁਰੂਆਤੀ ਨਿਰਦੇਸ਼ਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੋ
• lineTo(x,y) - ਲਾਈਨ ਦੇ ਅੰਤਮ ਨਿਰਦੇਸ਼ਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੋ

ਜੇਕਰ ਤੁਸੀਂ ਲਾਈਨ ਦਿਖਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ: ਇੱਕ 'ਪੰਖੀ' ਮੱਥਕ ਵਰਤੋਂ ਕਰਨਾ ਹੋਵੇਗਾ ਜਿਵੇਂ ਕਿ stroke()。

实例

ਸਥਾਨ (0,0) 'ਤੇ ਸ਼ੁਰੂਆਤੀ ਨਿਰਦੇਸ਼ਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੋ، ਸਥਾਨ (200,100) 'ਤੇ ਅੰਤਮ ਨਿਰਦੇਸ਼ਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੋ। ਫਿਰ stroke() ਮੱਥਕ ਨੂੰ ਵਰਤੋਂ ਕਰਕੇ ਇਸ ਨੂੰ ਅਜਿਹਾ ਦਿਖਾਓ:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

با خود امتحان کنید

ਗੋਲਾ ਦਿਖਾਓ

ਜੇਕਰ ਤੁਸੀਂ ਕੈਂਵਾਸ 'ਤੇ ਗੋਲਾ ਦਿਖਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ: ਹੇਠ ਲਿਖੇ ਮੱਥਕ ਨੂੰ ਵਰਤੋਂ ਕਰੋ:

• beginPath() - ਇੱਕ ਰਸਤਾ ਸ਼ੁਰੂ ਕਰੋ
• arc(x,y,r,startangle,endangle) - ਗੋਲਾ ਗੁੰਬਜ ਬਣਾਉਣਾ

ਜੇਕਰ ਤੁਸੀਂ arc() ਨਾਲ ਇੱਕ ਗੋਲਾ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ: ਸ਼ੁਰੂਆਤੀ ਕੋਣ ਨੂੰ 0 ਸੈੱਟ ਕਰੋ، ਅਨੰਤ ਕੋਣ ਨੂੰ 2*Math.PI ਸੈੱਟ ਕਰੋ। x ਅਤੇ y ਪੈਰਾਮੀਟਰ ਗੋਲੇ ਦੇ ਕੇਂਦਰ ਦੇ x ਅਤੇ y ਨਿਰਦੇਸ਼ਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੇ ਹਨ। r ਪੈਰਾਮੀਟਰ ਗੋਲੇ ਦੇ ਵਿਆਸ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ。

实例

使用 arc() 方法定义一个圆。然后使用 stroke() 方法来实际绘制圆：

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

با خود امتحان کنید

لطفاً به: مراجعه کنید

منول مرجع کامل کانواس کدوو3 سی کام