1.关于canvas元素
该元素专门用来绘制图形。在页面上放置一个canvas元素，就相当于在页面上放置了一块“画布”，可以在其中进行图形的描绘。需要利用JavaScript编写在其中进行绘画的脚本。
2.绘制矩形
(1)取得你canvas元素
使用document.getElementById等方法取得canvas对象。
（2）取得上下文
图形上下文是一个封装了很多绘图功能的对象
（3）填充与绘制边框
填充（fill）与绘制边框（stroke）
（4）设定绘图样式
填充图形的样式-----fillStyle
图形边框的样式-----strokeStyle
（5）指定线宽
使用图像上下文的的lineWidth属性设置图形边框的宽度
（6）指定颜色值
（7）绘制矩形
应用：
1 绘制图形的脚本文件
function draw(id) {
var canvas = document.getElementById(id);
if(canvas == null)
{
return false;
}
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0,0,400,300);
context.fillStyle = "red";
context.strokeStyle = "blue";
context.lineWidth = 1;
context.fillRect(50,50,100,100);
context.strokeRect(50,50,100,100);
}
2 具体绘制
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>绘制矩形</h2>
<canvas id="mc" width="400" height="280" style="border:1px solid black"></canvas>
<script type="text/javascript">
//获取canvas元素对应的DOM对象
var canvas=document.getElementById('mc');
//获取在canvas上绘图的CanvasRenderingContext2d对象
var ctx =canvas.getContext('2d');
//设置填充颜色
ctx.fillStyle='#f00';
//填充一个矩形
ctx.fillRect(30,20,120,60);
//设置填充颜色
ctx.fillStyle='#ff0';
//填充一个矩形
ctx.fillRect(80,60,120,60)
//设置线条颜色
ctx.strokeStyle='#00f';
//设置线条宽度
ctx.lineWidth=10;
//绘制一个矩形的边框
ctx.strokeRect(30,130,120,60);
//设置线条的颜色
ctx.strokeStyle="#0ff";
//设置线条的连接风格
ctx.lineJoin="round";
ctx.strokeRect(80,160,120,60)
ctx.strokeStyle="#f0f";
ctx.lineJoin="bevel";
ctx.strokeRect(130,190,120,60);
</script>
</body>
</html>
效果
小补充（引用自https://www.cnblogs.com/junshijie/p/5796399.html）
script在html中的摆放位置
html文件是自上而下的执行方式，但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到<script>脚本是则中断线程，待该script脚本执行结束之后程序才继续往下执行。所以，一般将script放在body之后是因为避免长时间执行script脚本而延迟阻塞。而有一些页面的效果的实现，是需要预先动态的加载一些js脚本，所以这些脚本应该放在<body>之前。其次，不能将需要访问dom元素的js放在body之前，因为此时还没有开始生成dom，所以在body之前的访问dom元素的js会出错，或者无效。就是因为这个，在dom没生成好时我就给它添加了方法，才导致这样。
真的应该多学习很多地方以为所以然了，却没深究。以后还要加油！
ps：其实还有另外一种方法，那就是用jquery的初始化页面方法，把上面给标签添加的点击事件加入到$(function(){})中也是可以的，原理和上面是一样的，这个方法是等页面加载好了才执行，所以不管放在哪都可以了！