2D渲染上下文的访问（三）_系统渲染上下文-CSDN博客

本文链接：https://blog.csdn.net/qq_22520215/article/details/84878162

本文详细介绍如何使用HTML5的Canvas元素进行绘图，包括创建Canvas元素、设置尺寸、获取2D渲染上下文及绘制矩形的基本步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步
必须在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); <!-- 一个画图函数，这里不用先知道-->
    });

效果图：