<canvas>元素只是创造了一个固定大小的画布，要想在它上面绘制内容，我们需要找到它的渲染上下文
<canvas>元素有一个getContex（）方法，这个方法是用来获取渲染上下文和它的绘画功能
canvas.width获取的是写在标签属性中的宽度值，eg :<canvas width="800" height="600"></canvas>这时我们获取的canvas的宽度值是800px但是如果canvas标签没有设置宽高属性，而是写在css样式表，或者style标签中，canvas.width获取的是canvas的默认宽（canvas默认宽是300px,默认高是150px）
JavaScript 的 canvas 元素可以用来生成环绕点。首先，你需要在你的 HTML 页面中创建一个 canvas 元素，然后在 JavaScript 中获取这个 canvas 元素的上下文（context），然后使用 context 的 arc() 方法来绘制一个环绕点。具体来说，你需要指定环绕点的圆心坐标和半径，以及开始和结束角度，这样就能在 canvas 上绘制出一个环绕点了。
例如，下面的代码绘制了一个圆心在 (100,100) 处，半径为 50 的环绕点：
var canvas = document.getElementById("myCanvas")
var context = canvas.getContext("2d")
context.arc(100, 100, 50, 0, 2 * Math.PI)
context.stroke()
注意，如果要在 canvas 上实际看到环绕点，还需要使用 context 的 stroke() 或 fill() 方法来描边或填充绘制的图形。
