<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>绘制几何图形</title>
</head>
<body>
<!-- fillRect(float x,float y,float width,float height)填充一个矩形区域
strokeRect(float x,float y,float width,float height)绘制一个矩形边框-->
<canvas > ctx.fillRect(40, 100, 150, 150);
//设置线条颜色
ctx.strokeStyle = "#F3B73F";
//设置线条的宽度
ctx.lineWidth = 6;
ctx.strokeRect(30, 200, 100, 100);
ctx.strokeStyle = "#F57284";
//设置线条链接点的风格
ctx.lineJoin = "meter";
ctx.strokeRect(50, 315, 120, 60);
ctx.strokeStyle = "#B19941";
ctx.lineJoin = "round";
ctx.strokeRect(50, 400, 120, 60);
ctx.strokeStyle = "#A6AAA9";
ctx.lineJoin = "bevel";
ctx.strokeRect(60, 470, 120, 60);
</script>
</body>
</html>