Drawing a rectangle context.fillRect(x,y,width,height) strokeRect(x,y,width,height)
x: The abscissa coordinate of the starting point of the rectangle (the origin of the coordinates is the upper left corner of the canvas, which is of course accurate , it is the original origin. You will understand it when you write about the deformation later. It doesn’t matter for now)
y: The ordinate of the starting point of the rectangle
width: the length of the rectangle
height: Rectangle height
Create HTML page, set canvas label
Write js, get canvas dom object
Get the context through the Dom object of the canvas tag
Set the drawing style and color
Draw a rectangle, or fill the rectangle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="demoCanvas" width="500" height="500">
<p>请使用支持HTML5的浏览器查看本实例</p>
</canvas>
<!---下面将演示一种绘制矩形的demo--->
<script type="text/javascript">
//第一步：获取canvas元素
var canvasDom = document.getElementById("demoCanvas");
//第二步：获取上下文
var context = canvasDom.getContext('2d');
//第三步：指定绘制线样式、颜色
context.strokeStyle = "red";
//第四步：绘制矩形，只有线。内容是空的
context.strokeRect(10, 10, 190, 100);
//以下演示填充矩形。
context.fillStyle = "blue";
context.fillRect(110,110,100,100);
</script>
</body>
</html>
Next Section