HTML Canvas 直线

ਉਦਾਹਰਣ

// ਕੈਂਵਾਸ ਬਣਾਓ:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// ਇੱਕ ਨਵਾਂ ਰਸਤਾ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ:
ctx.beginPath();
// ਸ਼ੁਰੂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ:
ctx.moveTo(0, 0);
// ਅੰਤ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ:
ctx.lineTo(200, 100);
// ਚਿੱਤਰਨ:
ctx.stroke();

亲自试一试

Canvas ਲਾਈਨ ਚਿੱਤਰਨ

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

ਮੈਥਡ

beginPath() ਮੈਥਡ ਇੱਕ ਨਵਾਂ ਰਸਤਾ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ। ਇਹ ਕੁਝ ਨਹੀਂ ਚਿੱਤਰਿਤ ਕਰਦਾ, ਸਿਰਫ ਇੱਕ ਨਵਾਂ ਰਸਤਾ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ。

moveTo() ਮੈਥਡ ਲਾਈਨ ਦੇ ਸ਼ੁਰੂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ। ਇਹ ਕੁਝ ਨਹੀਂ ਚਿੱਤਰਿਤ ਕਰਦਾ, ਸਿਰਫ ਇੱਕ ਸ਼ੁਰੂ ਨੂੰ ਸੈਟ ਕਰਦਾ ਹੈ。

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

stroke() ਮੈਥਡ ਲਾਈਨ ਨੂੰ ਸਾਚੀ ਤਰ੍ਹਾਂ ਚਿੱਤਰਿਤ ਕਰਦਾ ਹੈ। ਮੂਲ ਰੂਪ ਵਿੱਚ ਕਾਲਾ ਰੰਗ ਹੈ。

lineWidth ਪ੍ਰਤੀਯੋਗਿਤਾ

lineWidth ਪ੍ਰਤੀਯੋਗਿਤਾ ਕੈਂਵਾਸ ਵਿੱਚ ਚਿੱਤਰਨ ਲਈ ਵਰਤਣ ਵਾਲੀ ਲਾਈਨ ਦੀ ਚੌੜਾਈ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀ ਹੈ。

ਇਹ ਸੈਟ ਕਰਨਾ ਹੈ ਜਦੋਂ ਤੱਕ stroke() ਮੈਥਡ ਵਾਲੀ ਕਾਲਿਸ਼ ਹੋਵੇ।

ਉਦਾਹਰਣ

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.stroke();

亲自试一试

strokeStyle ਪ੍ਰਤੀਯੋਗਿਤਾ

strokeStyle ਪ੍ਰਤੀਯੋਗਿਤਾ ਕੈਂਵਾਸ ਵਿੱਚ ਚਿੱਤਰਨ ਲਈ ਵਰਤਣ ਵਾਲੀ ਸਟਾਈਲ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀ ਹੈ。

ਇਹ ਸੈਟ ਕਰਨਾ ਹੈ ਜਦੋਂ ਤੱਕ stroke() ਮੈਥਡ ਵਾਲੀ ਕਾਲਿਸ਼ ਹੋਵੇ।

ਉਦਾਹਰਣ

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.stroke();

亲自试一试

lineCap ਪ੍ਰਤੀਯੋਗਿਤਾ

lineCap ਪ੍ਰਤੀਯੋਗਿਤਾ ਲਾਈਨ ਦੇ ਅੰਤ ਦੇ ਸਟਾਈਲ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀ ਹੈ (butt, round ਜਾਂ square)。

ਮੂਲ ਰੂਪ ਵਿੱਚ square (ਚੌਕੋਰਾ) ਹੈ。

ਇਹ ਸੈਟ ਕਰਨਾ ਹੈ ਜਦੋਂ ਤੱਕ stroke() ਮੈਥਡ ਵਾਲੀ ਕਾਲਿਸ਼ ਹੋਵੇ।

ਉਦਾਹਰਣ

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(175,75);
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.stroke();

亲自试一试

另请参阅：

CodeW3C.com 的完整 Canvas 参考手册