9.9 KiB
ਅਸਾਈਨਮੈਂਟ: ਕੈਨਵਸ API ਦੀ ਖੋਜ ਕਰੋ
ਸਿੱਖਣ ਦੇ ਉਦੇਸ਼
ਇਸ ਅਸਾਈਨਮੈਂਟ ਨੂੰ ਪੂਰਾ ਕਰਕੇ, ਤੁਸੀਂ ਕੈਨਵਸ API ਦੇ ਮੁੱਢਲੇ ਸਿਧਾਂਤਾਂ ਦੀ ਸਮਝ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਕਰੋਗੇ ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਅਤੇ HTML5 ਕੈਨਵਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਦ੍ਰਿਸ਼ਮਾਨ ਤੱਤ ਬਣਾਉਣ ਲਈ ਰਚਨਾਤਮਕ ਸਮੱਸਿਆ-ਸੁਲਝਾਉਣ ਨੂੰ ਲਾਗੂ ਕਰੋਗੇ।
ਹਦਾਇਤਾਂ
ਕੈਨਵਸ API ਦੇ ਕਿਸੇ ਇੱਕ ਪਹلو ਨੂੰ ਚੁਣੋ ਜੋ ਤੁਹਾਨੂੰ ਦਿਲਚਸਪ ਲੱਗੇ ਅਤੇ ਇਸ ਦੇ ਆਸਪਾਸ ਇੱਕ ਦਿਲਚਸਪ ਦ੍ਰਿਸ਼ਮਾਨ ਪ੍ਰੋਜੈਕਟ ਬਣਾਓ। ਇਹ ਅਸਾਈਨਮੈਂਟ ਤੁਹਾਨੂੰ ਸਿੱਖੇ ਗਏ ਡ੍ਰਾਇੰਗ ਸਮਰੱਥਾਵਾਂ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰਨ ਅਤੇ ਕੁਝ ਅਨੋਖਾ ਬਣਾਉਣ ਲਈ ਪ੍ਰੇਰਿਤ ਕਰਦਾ ਹੈ।
ਪ੍ਰੋਜੈਕਟ ਵਿਚਾਰ ਜੋ ਤੁਹਾਨੂੰ ਪ੍ਰੇਰਿਤ ਕਰ ਸਕਦੇ ਹਨ
ਜਿਆਮਿਤੀ ਪੈਟਰਨ:
- ਬਣਾਓ ਬੇਤਰਤੀਬੀ ਸਥਿਤੀ ਦੇ ਨਾਲ ਚਮਕਦੇ ਤਾਰਿਆਂ ਦੀ ਗਲੈਕਸੀ
- ਡਿਜ਼ਾਈਨ ਕਰੋ ਦੁਹਰਾਏ ਗਏ ਜਿਆਮਿਤੀ ਆਕਰਿਤੀਆਂ ਨਾਲ ਇੱਕ ਦਿਲਚਸਪ ਟੈਕਸਚਰ
- ਤਿਆਰ ਕਰੋ ਘੁੰਮਦੇ, ਰੰਗੀਨ ਪੈਟਰਨ ਨਾਲ ਇੱਕ ਕੈਲੀਡੋਸਕੋਪ ਪ੍ਰਭਾਵ
ਇੰਟਰਐਕਟਿਵ ਤੱਤ:
- ਵਿਕਸਿਤ ਕਰੋ ਇੱਕ ਡ੍ਰਾਇੰਗ ਟੂਲ ਜੋ ਮਾਊਸ ਦੀ ਚਲਹਿੜ ਨੂੰ ਜਵਾਬ ਦਿੰਦਾ ਹੈ
- ਲਾਗੂ ਕਰੋ ਆਕਰਿਤੀਆਂ ਜੋ ਕਲਿੱਕ ਕਰਨ 'ਤੇ ਰੰਗ ਬਦਲਦੀਆਂ ਹਨ
- ਡਿਜ਼ਾਈਨ ਕਰੋ ਇੱਕ ਸਧਾਰਨ ਐਨੀਮੇਸ਼ਨ ਲੂਪ ਚਲਦੇ ਤੱਤਾਂ ਨਾਲ
ਗੇਮ-ਸੰਬੰਧਿਤ ਗ੍ਰਾਫਿਕਸ:
- ਬਣਾਓ ਇੱਕ ਸਪੇਸ ਗੇਮ ਲਈ ਸਕ੍ਰੋਲਿੰਗ ਬੈਕਗ੍ਰਾਊਂਡ
- ਤਿਆਰ ਕਰੋ ਕਣ ਪ੍ਰਭਾਵ ਜਿਵੇਂ ਕਿ ਧਮਾਕੇ ਜਾਂ ਜਾਦੂ ਦੇ ਜਾਦੂ
- ਬਣਾਓ ਬਹੁ-ਫਰੇਮ ਵਾਲੇ ਐਨੀਮੇਟਡ ਸਪ੍ਰਾਈਟ
ਵਿਕਾਸ ਹਦਾਇਤਾਂ
ਖੋਜ ਅਤੇ ਪ੍ਰੇਰਣਾ:
- CodePen 'ਤੇ ਕ੍ਰੀਏਟਿਵ ਕੈਨਵਸ ਉਦਾਹਰਨਾਂ ਨੂੰ ਬ੍ਰਾਊਜ਼ ਕਰੋ (ਪ੍ਰੇਰਣਾ ਲਈ, ਨਕਲ ਕਰਨ ਲਈ ਨਹੀਂ)
- Canvas API ਦਸਤਾਵੇਜ਼ ਦਾ ਅਧਿਐਨ ਕਰੋ ਵਾਧੂ ਵਿਧੀਆਂ ਲਈ
- ਵੱਖ-ਵੱਖ ਡ੍ਰਾਇੰਗ ਫੰਕਸ਼ਨ, ਰੰਗ ਅਤੇ ਐਨੀਮੇਸ਼ਨ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ
ਤਕਨੀਕੀ ਜ਼ਰੂਰਤਾਂ:
getContext('2d')ਨਾਲ ਸਹੀ ਕੈਨਵਸ ਸੈਟਅੱਪ ਵਰਤੋਂ- ਅਰਥਪੂਰਨ ਟਿੱਪਣੀਆਂ ਸ਼ਾਮਲ ਕਰੋ ਜੋ ਤੁਹਾਡੇ ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਨੂੰ ਸਮਝਾਉਂਦੀਆਂ ਹਨ
- ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਟੈਸਟ ਕਰੋ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਇਹ ਬਿਨਾਂ ਗਲਤੀਆਂ ਦੇ ਚੱਲਦਾ ਹੈ
- ਆਧੁਨਿਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਸਿੰਟੈਕਸ (const/let, arrow functions) ਲਾਗੂ ਕਰੋ
ਰਚਨਾਤਮਕ ਅਭਿਵਿਅਕਤੀ:
- ਕੈਨਵਸ API ਦੇ ਇੱਕ ਫੀਚਰ 'ਤੇ ਧਿਆਨ ਦਿਓ ਪਰ ਇਸ ਨੂੰ ਗਹਿਰਾਈ ਨਾਲ ਖੋਜੋ
- ਤੁਹਾਡਾ ਆਪਣਾ ਰਚਨਾਤਮਕ ਤੱਤ ਸ਼ਾਮਲ ਕਰੋ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਨਿੱਜੀ ਬਣਾਉਣ ਲਈ
- ਵਿਚਾਰ ਕਰੋ ਕਿ ਤੁਹਾਡੀ ਰਚਨਾ ਵੱਡੇ ਐਪਲੀਕੇਸ਼ਨ ਜਾਂ ਗੇਮ ਦਾ ਹਿੱਸਾ ਕਿਵੇਂ ਹੋ ਸਕਦੀ ਹੈ
ਜਮ੍ਹਾਂ ਕਰਨ ਦੀਆਂ ਹਦਾਇਤਾਂ
ਤੁਹਾਡਾ ਪੂਰਾ ਕੀਤਾ ਪ੍ਰੋਜੈਕਟ ਇੱਕ HTML ਫਾਈਲ ਦੇ ਰੂਪ ਵਿੱਚ CSS ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੇ ਨਾਲ ਜੁੜੇ ਹੋਏ ਜਾਂ ਇੱਕ ਫੋਲਡਰ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਫਾਈਲਾਂ ਦੇ ਰੂਪ ਵਿੱਚ ਜਮ੍ਹਾਂ ਕਰੋ। ਆਪਣੇ ਰਚਨਾਤਮਕ ਚੋਣਾਂ ਅਤੇ ਕੈਨਵਸ API ਫੀਚਰਾਂ ਦੀ ਖੋਜ ਕਰਨ ਬਾਰੇ ਇੱਕ ਛੋਟੀ ਟਿੱਪਣੀ ਸ਼ਾਮਲ ਕਰੋ।
ਰੂਬ੍ਰਿਕ
| ਮਾਪਦੰਡ | ਸ਼ਾਨਦਾਰ | ਯੋਗ | ਸੁਧਾਰ ਦੀ ਲੋੜ |
|---|---|---|---|
| ਤਕਨੀਕੀ ਲਾਗੂਕਰਨ | ਕੈਨਵਸ API ਨੂੰ ਕ੍ਰੀਏਟਿਵ ਤਰੀਕੇ ਨਾਲ ਕਈ ਫੀਚਰਾਂ ਨਾਲ ਵਰਤਿਆ ਗਿਆ, ਕੋਡ ਬਿਲਕੁਲ ਸਹੀ ਚੱਲਦਾ ਹੈ, ਆਧੁਨਿਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਸਿੰਟੈਕਸ ਲਾਗੂ ਕੀਤਾ | ਕੈਨਵਸ API ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਵਰਤਿਆ ਗਿਆ, ਕੋਡ ਛੋਟੀਆਂ ਗਲਤੀਆਂ ਨਾਲ ਚੱਲਦਾ ਹੈ, ਬੁਨਿਆਦੀ ਲਾਗੂਕਰਨ | ਕੈਨਵਸ API ਦੀ ਕੋਸ਼ਿਸ਼ ਕੀਤੀ ਗਈ ਪਰ ਕੋਡ ਵਿੱਚ ਗਲਤੀਆਂ ਹਨ ਜਾਂ ਚੱਲਦਾ ਨਹੀਂ |
| ਰਚਨਾਤਮਕਤਾ ਅਤੇ ਡਿਜ਼ਾਈਨ | ਬਹੁਤ ਹੀ ਅਸਲ ਧਾਰਨਾ ਨਾਲ ਪਾਲਿਸ਼ ਕੀਤੀ ਦ੍ਰਿਸ਼ਮਾਨ ਅਪੀਲ, ਚੁਣੇ ਗਏ ਕੈਨਵਸ ਫੀਚਰ ਦੀ ਗਹਿਰਾਈ ਨਾਲ ਖੋਜ ਦਿਖਾਈ | ਕੈਨਵਸ ਫੀਚਰਾਂ ਦੀ ਚੰਗੀ ਵਰਤੋਂ ਕੁਝ ਰਚਨਾਤਮਕ ਤੱਤਾਂ ਨਾਲ, ਮਜ਼ਬੂਤ ਦ੍ਰਿਸ਼ਮਾਨ ਨਤੀਜਾ | ਬੁਨਿਆਦੀ ਲਾਗੂਕਰਨ ਘੱਟ ਰਚਨਾਤਮਕਤਾ ਜਾਂ ਦ੍ਰਿਸ਼ਮਾਨ ਅਪੀਲ |
| ਕੋਡ ਗੁਣਵੱਤਾ | ਚੰਗੀ ਤਰ੍ਹਾਂ ਸੰਗਠਿਤ, ਟਿੱਪਣੀ ਕੀਤੀ ਗਈ ਕੋਡ ਜੋ ਵਧੀਆ ਅਭਿਆਸਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ, ਕੁਸ਼ਲ ਅਲਗੋਰਿਥਮ | ਸਾਫ਼ ਕੋਡ ਕੁਝ ਟਿੱਪਣੀਆਂ ਨਾਲ, ਬੁਨਿਆਦੀ ਕੋਡਿੰਗ ਮਿਆਰਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ | ਕੋਡ ਵਿੱਚ ਸੰਗਠਨ ਦੀ ਘਾਟ, ਘੱਟ ਟਿੱਪਣੀਆਂ, ਅਕੁਸ਼ਲ ਲਾਗੂਕਰਨ |
ਚਿੰਤਨ ਪ੍ਰਸ਼ਨ
ਤੁਹਾਡਾ ਪ੍ਰੋਜੈਕਟ ਪੂਰਾ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਇਹ ਪ੍ਰਸ਼ਨ ਵਿਚਾਰ ਕਰੋ:
- ਤੁਸੀਂ ਕਿਹੜਾ ਕੈਨਵਸ API ਫੀਚਰ ਚੁਣਿਆ ਅਤੇ ਕਿਉਂ?
- ਤੁਹਾਨੂੰ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਬਣਾਉਣ ਦੌਰਾਨ ਕਿਹੜੀਆਂ ਚੁਣੌਤੀਆਂ ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪਿਆ?
- ਤੁਹਾਡਾ ਪ੍ਰੋਜੈਕਟ ਵੱਡੇ ਐਪਲੀਕੇਸ਼ਨ ਜਾਂ ਗੇਮ ਵਿੱਚ ਕਿਵੇਂ ਵਧਾਇਆ ਜਾ ਸਕਦਾ ਹੈ?
- ਤੁਸੀਂ ਅਗਲੇ ਕਿਹੜੇ ਹੋਰ ਕੈਨਵਸ API ਫੀਚਰਾਂ ਦੀ ਖੋਜ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ?
💡 ਪ੍ਰੋ ਟਿਪ: ਸਧਾਰਨ ਤੋਂ ਸ਼ੁਰੂ ਕਰੋ ਅਤੇ ਹੌਲੀ-ਹੌਲੀ ਜਟਿਲਤਾ ਸ਼ਾਮਲ ਕਰੋ। ਇੱਕ ਚੰਗੀ ਤਰ੍ਹਾਂ ਲਾਗੂ ਕੀਤਾ ਸਧਾਰਨ ਪ੍ਰੋਜੈਕਟ ਇੱਕ ਬਹੁਤ ਜਟਿਲ ਪ੍ਰੋਜੈਕਟ ਤੋਂ ਬਿਹਤਰ ਹੈ ਜੋ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਨਹੀਂ ਕਰਦਾ!
ਅਸਵੀਕਰਤਾ:
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ Co-op Translator ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।