版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_22520215/article/details/84878162
第一步
必须在body中创建一个canvas元素，这个很简单，主要在创建的时候可用属性width和height设置大小，默认为300,150
代码如下（宽500 高500）；id必须命名；
<body> <!-- 页面的主题内容均在这里 -->
<canvas width="500" height="500" id="mycanvas"></canvas>
</body>这个时候网页是没有任何东西的
第二步
绘图是像素的操作，因此需要定位像素，规定画布原点为左上角，为（0,0）
如下图（笛卡尔坐标系）
第三步
需要做出2d渲染上下文的访问接口，在JavaScript中加入以下代码（其中的var canvas = $("#mycanvas"); 必须与canves的id属性一致）
<script type="text/javascript" src="jquery-3.3.1.min.js"></script> <!-- 引用jQuery库-->
<script type="text/javascript">
$(document).ready(function(){
//alert("HELLO WORLD!!!")
var canvas = $("#mycanvas");
var context = canvas.get(0).getContext("2d");
});
</script>这样访问2d渲染上下文的工作就做完了！
第四步
调用函数画一个矩形表示2d渲染上下文接口验证访问成功。画一个以（10,10）为原点（左上角）的宽100，高100的矩形
代码如下：
<script type="text/javascript">
$(document).ready(function(){
//alert("HELLO WORLD!!!")
var canvas = $("#mycanvas");
var context = canvas.get(0).getContext("2d");
context.fillRect(10,10,100,100); <!-- 一个画图函数，这里不用先知道-->
});效果图：
