Comment: Today I learned the canvas of html5 and found that the coordinates and size of fillRect have been incorrect. After studying for a long time, I found that the width and height of canvas must be inlined in the canvas tag.
fillRect(100,100,100,100) The first 2 100s refer to coordinates, and the last 2 100s refer to width and height.Today I learned the canvas of html5 and found that the coordinates and size of fillRect have been incorrect. After studying for a long time, I found that the width and height of canvas must be inlined into the canvas tag. Depressed for a long time.
Error Method 1:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#mycanvas{
width: 200px;
height: 200px;
background: yellow;
}
</style>
</head>
<body>
<canvas >/canvas>
<script>
var c = document.getElementById('mycanvas');
var ctx = c.getContext("2d");
ctx.fillStyle='#f36';
ctx.fillRect(100, 100, 100, 100);
</script>
</body>
</html>
Wrong way 2:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas></canvas>
<script>
var c = document.getElementById('mycanvas');
var ctx = c.getContext("2d");
ctx.fillStyle='#f36';
ctx.fillRect(100, 100, 100, 100);
</script>
</body>
</html>
Show results:
The correct way:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas></canvas>
<script>
var c = document.getElementById('mycanvas');
var ctx = c.getContext("2d");
ctx.fillStyle='#f36';
ctx.fillRect(100, 100, 100, 100);
</script>
</body>
</html>