HTML5 Canvas

<canvas> element का इस्तेमाल web page में चित्र (graphics) बनाने के लिए किया जाता है | ये हम JavaScript के ज़रिये बनाते है|

canvas में काफी methods है जिसके ज़रिये हम चौकोर(square), वृत्त (circle), आयत (rectangle) इत्यादि बना सकते है |

Canvas के उदहारण ।

<canvas id=”canvasdraw” width=”500″ height=”300″></canvas>

JavaScript के ज़रिये चित्र |

<script>
var canvas = document.getElementById(“canvasdraw”);
var ctx = canvas.getContext(“2d”);
ctx.fillStyle = “#ff00ff”;
ctx.fillRect(10,10,100,100);
</script>

Line ऐसे बनाए |

<script>
var canvas = document.getElementById(“canvasdraw”);
var ctx = canvas.getContext(“2d”);
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.stroke();
</script>

Circle ऐसे बनाए |

<script>
var canvas = document.getElementById(“canvasdraw”);
var ctx = canvas.getContext(“2d”);
ctx.beginPath();
ctx.arc(80,40,30,0,10);
ctx.stroke();
</script>

Text ऐसे बनाए |

<script>
var canvas = document.getElementById(“canvasdraw”);
var ctx = canvas.getContext(“2d”);
ctx.font = “20px timesnewroman”;
ctx.fillText(“Hello World”,20,30);
</script>

Gradient ऐसे बनाए |

<script>
var canvas = document.getElementById(“canvasdraw”);
var ctx = canvas.getContext(“2d”);
var gradient = ctx.createLinearGradient(10,10,150,0);
gradient.addColorStop(0,”green”);
gradient.addColorStop(1,”yellow”);
ctx.fillStyle = gradient;
ctx.fillRect(10,10,150,80);
</script>