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

ਕੈਵਾਸ 'ਤੇ ਜਾਵਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਚਿੱਤਰਨ

ਐੱਚਟੀਐੱਮਐੱਲ ਕੈਵਾਸ 'ਤੇ ਸਾਰੇ ਚਿੱਤਰਨ ਜਨਰਲ ਐੱਚਟੀਐੱਮਐੱਲ ਵਿੱਚ ਜਾਵਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕੀਤੇ ਜਾਂਦੇ ਹਨ:

ਉਦਾਹਰਣ

<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>

ਸਵੈ ਨੂੰ ਪ੍ਰਯੋਗ ਕਰੋ

ਕਦਮ 1: ਕੈਵਾਸ ਵਸਤੂ ਲੱਭੋ

ਪਹਿਲਾਂ, ਤੁਸੀਂ <canvas> ਵਸਤੂ ਨੂੰ ਲੱਭਣਾ ਹੋਵੇਗਾ。

ਇਹ ਐੱਚਟੀਐੱਮਐੱਲ ਡੋਮ ਮੰਥਨ ਦੀਆਂ ਵਰਤੋਂ ਕਰਕੇ ਪ੍ਰਾਪਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ:

const canvas = document.getElementById("myCanvas");

ਕਦਮ 2: ਚਿੱਤਰਨ ਵਸਤੂ ਬਣਾਓ

ਇਸ ਦੇ ਇਲਾਵਾ, ਤੁਸੀਂ ਇੱਕ ਚਿੱਤਰਨ ਵਸਤੂ ਦੀ ਜਰੂਰਤ ਹੈ。

getContext() ਇੱਕ ਅੰਤਰਨਿਰਭਰ ਐੱਚਟੀਐੱਮਐੱਲ ਵਸਤੂ ਹੈ, ਜਿਸ ਵਿੱਚ ਚਿੱਤਰਨ ਲਈ ਮੁੱਲ ਅਤੇ ਤਰੀਕੇ ਪ੍ਰਦਾਨ ਕੀਤੇ ਜਾਂਦੇ ਹਨ:

const ctx = canvas.getContext("2d");

ਕਦਮ 3: ਕੈਵਾਸ 'ਤੇ ਚਿੱਤਰਨ

ਅੰਤ ਵਿੱਚ, ਤੁਸੀਂ ਕੈਵਾਸ 'ਤੇ ਚਿੱਤਰਨ ਕਰ ਸਕਦੇ ਹੋ।

ਚਿੱਤਰਨ ਵਸਤੂ ਦੇ ਪੂਰਕ ਸਟਾਈਲ ਨੂੰ ਲਾਲ ਕਰੋ:

ctx.fillStyle = "#FF0000";

fillStyle ਮੁੱਲ ਕ੍ਰਿਪਸ ਰੰਗ, ਗ੍ਰੇਡੀਐਂਟ ਜਾਂ ਪੈਟਰਨ ਹੋ ਸਕਦਾ ਹੈ। ਮੂਲਤਬੀ fillStyle ਕਾਲਾ ਰੰਗ ਹੈ。

fillRect(x,y,width,height) ਮੰਥਨ ਕੈਵਾਸ 'ਤੇ ਇੱਕ ਚੱਕਰ ਦਿਖਾਉਂਦਾ ਹੈ, ਪੂਰਕ ਸਟਾਈਲ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪੂਰਕ ਕਰੋ:

ctx.fillRect(0, 0, 150, 75);

ایک بار دیکھئے:

کدوو3 سی کام کا پورا کینواس مستندات