版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_22520215/article/details/84887308
函数定义：
context.fillRect(x,y,width,height)
参数x,y表示矩形的左上角位置，参数width，height表示矩形的宽和高，并填充矩形；
context.strokeRect(x,y,width,height)
参数x,y表示矩形的左上角位置，参数width，height表示矩形的宽和高，并勾勒矩形；代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" >$(document).ready(function(){
var canvas = $("#myCanvas");
var context = canvas.get(0).getContext("2d");
context.fillRect(40,40,100,100);
context.strokeRect(150,150,100,100);
})</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="background-color: #112233">
<!-- no no no no -->
</canvas>
</body>
</html>如下图：
若想改变颜色，只需在绘画前使用以下语句：
context.fillStyle = "#124278";
填充矩形颜色
context.strokeStyle = "#cca123";
矩形框的颜色代码如下：
context.fillStyle = "#124278";
context.fillRect(40,40,100,100);
context.strokeStyle = "#cca123";
context.strokeRect(150,150,100,100);可以看到效果图如下：
