HTML Canvas ਸ਼ਰਤ

实例

ਉਦਾਹਰਣ 1

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

ਆਪਣੇ ਅਨੁਸਾਰ ਕੋਸ਼ਿਸ਼ ਕਰੋ

Canvas ਲਾਈਨ ਚਿੱਤਰਨ

ਲਾਈਨ ਚਿੱਤਰਨ ਲਈ ਕੈਂਵਾਸ ਵਿੱਚ ਮਾਰਗ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ:

ਮੰਥਨ

beginPath() ਮੰਥਨ ਇੱਕ ਨਵਾਂ ਮਾਰਗ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ।ਇਹ ਕੁਝ ਨਹੀਂ ਦਰਸਾਉਂਦਾ ਹੈ ਸਿਰਫ਼ ਇੱਕ ਨਵਾਂ ਮਾਰਗ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。

moveTo() ਲਾਈਨ ਦੇ ਸ਼ੁਰੂ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ।ਇਹ ਕੁਝ ਨਹੀਂ ਦਰਸਾਉਂਦਾ ਹੈ ਸਿਰਫ਼ ਇੱਕ ਸ਼ੁਰੂ ਨੂੰ ਸੈਟ ਕਰਦਾ ਹੈ。

lineTo() ਮੰਥਨ ਲਾਈਨ ਦੇ ਅੰਤ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ।ਇਹ ਕੁਝ ਨਹੀਂ ਦਰਸਾਉਂਦਾ ਹੈ ਸਿਰਫ਼ ਇੱਕ ਅੰਤ ਨੂੰ ਸੈਟ ਕਰਦਾ ਹੈ。

stroke() ਮੰਥਨ ਲਾਈਨਾਂ ਨੂੰ ਸ਼ਾਨਦਾਰ ਕਰਦਾ ਹੈ।ਮੂਲਤਬੀ ਲਾਈਨ ਰੰਗ ਕਾਲਾ ਹੈ。

ਹੋਰ ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 2

ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.stroke();

ਆਪਣੇ ਅਨੁਸਾਰ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਉਦਾਹਰਣ 3

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

ਆਪਣੇ ਅਨੁਸਾਰ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਸੁਝਾਅ

ਰੈਕਟੈਂਜ ਦਰਸਾਉਣ ਲਈ ਤੁਸੀਂ 4 ਲਾਈਨਾਂ ਨਹੀਂ ਦਰਸਾਉਣੀਆਂ ਹਨ。

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

strokeStyle ਪ੍ਰਾਪਰਟੀ

strokeStyle ਪ੍ਰਾਪਰਟੀ ਕੈਂਵਾਸ ਵਿੱਚ ਚਿੱਤਰਨ ਲਈ ਵਰਤਣ ਵਾਲੀ ਸਟਾਈਲ ਨਿਰਧਾਰਿਤ ਕਰਦੀ ਹੈ。

ਮੰਥਨ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਇਸ ਨੂੰ ਕਰਨਾ ਹੈ。 stroke() ਮੰਥਨ ਤੋਂ ਪਹਿਲਾਂ ਇਸ ਨੂੰ ਸੈਟ ਕਰੋ。

实例

ctx.beginPath();
// 定义矩形
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// 定义三角形
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "red";
ctx.stroke();

ਆਪਣੇ ਅਨੁਸਾਰ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਇਹ ਵੀ ਦੇਖੋ:

CodeW3C.com ਦੀ ਪੂਰੀ Canvas ਸੰਦਰਭ ਮੈਨੂਅਲ