HTML5 - Canvas वेबपेजवर चित्रकला-२
ctx.moveTo(100, 100);
ctx.lineTo(300, 100);
ctx.lineTo(300, 300);
ctx.lineTo(100, 300);
ctx.lineTo(100, 100);
याऎवजी ctx.rect(100,100,200,200) असे लिहिता येते.
वरील चौकोन रंगाने पूर्ण भरला होता. असा रंगीत चौकोन न काढता आपल्याला फक्त चौकट काढावयाची असल्यास ctx.lineWidth, ctx.strokeStyle,ctx.stroke() यांचा उपयोग करून कडांची जाडी, रंग ठरवून चौकट काढता येते. अथवा चौकट असणारा रंगीत चौकोन काढता येतो.
ctx.rect या सूत्राचा वापर करून तसेच जावास्क्रीप्टच्या गणिती प्रक्रिया वापरून बुद्धीबळाचा पट काढता येईल . त्याचा प्रोग्राम व चित्र दिले आहे.
<!DOCTYPE html>
<html>
<head>
<title>HTML 5 chessboard</title>
<meta charset="UTF-8">
<script>
function init() {
ctx = document.getElementById('canvas').getContext('2d');
for (i=0; i<4; i++){
for ( j=0;j<4;j++){
ctx.beginPath();
ctx.fillStyle = '#999999';
ctx.rect(100+i*60,100+j*60, 30, 30);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.fillStyle = '#333333';
ctx.rect(100+i*60,130+j*60, 30, 30);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.fillStyle = '#333333';
ctx.rect(130+i*60,100+j*60, 30, 30);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.fillStyle = '#999999';
ctx.rect(130+i*60,130+j*60, 30, 30);
ctx.closePath();
ctx.fill();
}}
}
</script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="600" height="400">
Your browser does not support the canvas element .
</canvas>
</body>
</html>