【基础知识】HTML5 Canvas 中canvas.width和context.canvas.width的区别和使用（参考官方文档）

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

前提

Javascript的代码是这个样子。

var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d');

发现问题

在书本的样式代码中，发现canvas.width和context.canvas.width有混着用的现象。

探究

为了区别他们两个，去查询官方文档。

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/canvas

CanvasRenderingContext2D.canvas 属性是 Canvas API 的一部分，是对与给定上下文关联的HTMLCanvasElement对象的只读引用。如果没有 <canvas> 元素与之对应，对象值为null 。

结论 

CanvasRenderingContext2D.canvas还是引用的获取到的canvas，所以二者从本质上没有区别。

但是，由于要简化封装，在函数传参数的时候，可以在一定程度上避免过多传参的代码。比如代码函数中已经传context来进行某些操作，我们接下来还要使用画布的宽高，此时就没必要传递canvas进来再获取width和height了，只需要通过context.canvas来读取宽高，少传递一个参数，多一点可读性。