注意：先写html部分 后JavaScript 不然就不会得出结果（如果不这样就会在html加载之前就运行了js） 像我下边这样写 或者：像这个https://blog.csdn.net/wuhawang/article/details/52879714博客解决
方法：
1.获取当前画布对象
2.创建对象 （2d 或3d）
3.绘制图形
（1）绘制矩形：
方法：有四个参数 前两个表示左上角的坐标位置，第三个表示宽度，第四个表示高度。
fillRect()：绘制一个没有边框的矩形，只有填充色
< !DOCTYPE html>
< html lang=“en”>
< head>
< meta charset=“UTF-8”>
< title>canvas结合JavaScript画图< /title>
< /head>
< body>
< canvas id=“aaa”>
< /canvas>
< script type=“text/javascript”>
var d=document.getElementById(“aaa”); //获取当前画布对象
var t=d.getContext(“2d”); //创建context对象
t.fillStyle="#FF0000"; //填充颜色
t.fillRect(0,0,50,50);
< /script>
< /body>
< /html>
strokeRect():绘制一个有边框的矩形。
< !DOCTYPE html>
< html lang=“en”>
< head>
< meta charset=“UTF-8”>
< title>canvas结合JavaScript画图< /title>
< /head>
< body>
< canvas id=“aaa”>
< /canvas>
< script type=“text/javascript”>
var d=document.getElementById(“aaa”); //获取当前画布对象
var t=d.getContext(“2d”); //创建context对象
t.fillStyle="#FF0000"; //填充颜色 在这无用
t.strokeRect(0,0,100,100);
< /script>
< /body>
< /html>
clearRect():清除一个矩形区域，被清除的区域将没有任何线条。
< !DOCTYPE html>
< html lang=“en”>
< head>
< meta charset=“UTF-8”>
< title>canvas结合JavaScript画图< /title>
< /head>
< body>
< canvas id=“aaa”>
< /canvas>
< script type=“text/javascript”>
var d=document.getElementById(“aaa”); //获取当前画布对象
var t=d.getContext(“2d”); //创建context对象
t.fillStyle="#FF0000"; //填充颜色 在这无用
t.strokeRect(0,0,100,100);
t.clearRect(0,0,100,100);
< /script>
< /body>
< /html>
（2）绘制圆形
方法：
beginPath():开始绘制路径
arc(x,y,radius,startAngle,endAngle,anticlockwise):参数表示：x,y:圆的原点 ；（后面按顺序对应） 半径，开始弧度，结束弧度（不是度数）,圆的方向（值为：true/false）
closePath():结束路径的绘制
fill():填充
stroke():设置边框
< !DOCTYPE html>
< html lang=“en”>
< head>
< meta charset=“UTF-8”>
< title>canvas结合JavaScript画图< /title>
< /head>
< body>
< canvas id=“aaa”>
< /canvas>
< script type=“text/javascript”>
var d=document.getElementById(“aaa”); //获取当前画布对象
var t=d.getContext(“2d”); //创建context对象
t.fillStyle="#FF0000" //如果不设置（即为无此代码） 填充为黑
t.beginPath();
t.arc(20,20,20,0,Math.PI1,true); //Math.PI1：半圆
t.closePath();
t.fill(); //填充
t.stroke(); //设置边框
< /script>
< /body>
< /html>
不设置边框时：
设置边框时：
