Q2) Advin is a web designer and has been given a task to crete a chess board.
A chess board is a combination of eight rows and eight columns. For this, he needs to create
a matrix of 8*8 in canvas. In addition, he needs to apply alternate colors on the squares in the chess
board, i.e. black and white. Help advin to perform this task.
Ans2)
<HTML>
<HEAD>
<canvas id="canvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var baseX = 0.5, baseY=0.5, width=50;
for (var i = 0; i < 8; i++){
for (var j = 0; j < 8; j++) {
var x = baseX + width * i, y = baseY + width * j;
if ((i+j) % 2 !=0){
ctx.fillRect(x, y, width, width);
}
else {
ctx.strokeRect(x, y, width, width);
}
}
}
</script>
<body></body>
</head>
</html>
A chess board is a combination of eight rows and eight columns. For this, he needs to create
a matrix of 8*8 in canvas. In addition, he needs to apply alternate colors on the squares in the chess
board, i.e. black and white. Help advin to perform this task.
Ans2)
<HTML>
<HEAD>
<canvas id="canvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var baseX = 0.5, baseY=0.5, width=50;
for (var i = 0; i < 8; i++){
for (var j = 0; j < 8; j++) {
var x = baseX + width * i, y = baseY + width * j;
if ((i+j) % 2 !=0){
ctx.fillRect(x, y, width, width);
}
else {
ctx.strokeRect(x, y, width, width);
}
}
}
</script>
<body></body>
</head>
</html>
No comments:
Post a Comment