హెచ్టిఎంఎల్ కాన్వాస్ డ్రాయింగ్
కాంపాస్ పైన జావాస్క్రిప్ట్ ద్వారా చిత్రకరణ
హెచ్ఎంఎల్ కాంపాస్ పైన అన్ని చిత్రకరణలను జావాస్క్రిప్ట్ ద్వారా చేపట్టాలి:
ఉదాహరణ
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
ఒకటిగా చాన్సెస్ అంశాన్ని కనుగొనండి
మొదటగా, మీరు <canvas> అంశాన్ని కనుగొనాలి.
ఇది HTML DOM పద్ధతి getElementById() ద్వారా చేసిన పని కావచ్చు:
const canvas = document.getElementById("myCanvas");
రెండవ చర్య: చిత్రకరణ వస్తువును సృష్టించండి
మీరు ఒక చిత్రకరణ వస్తువును కలిగికలిగించాలి.
getContext() ఒక అంతర్భాగ హెచ్ఎంఎల్ పద్ధతి, దీనిద్వారా చిత్రకరణ అంశాలు మరియు పద్ధతులను అందిస్తుంది:
const ctx = canvas.getContext("2d");
మూడవ చర్య: కాంపాస్ పైన చిత్రకరణ
చివరగా, మీరు కాంపాస్ పైన చిత్రకరణను చేపట్టవచ్చు.
చిత్రకరణ వస్తువు పరిపూరణ రంగును ఎరుపు రంగుగా నిర్ణయించండి:
ctx.fillStyle = "#FF0000";
fillStyle అంశం CSS రంగు, గ్రేడియంట్ లేదా మెట్రిక్స్ కావచ్చు. అప్రమేయంగా fillStyle కు నలుపు రంగు ఉంటుంది.
fillRect(x,y,width,height) పద్ధతి కాంపాస్ పైన ఒక క్షేత్రాకారాన్ని చిత్రీకరించి, పరిపూరణ రంగును ఉపయోగించి పూరిస్తుంది:
ctx.fillRect(0, 0, 150, 75);
