Canvas，意为画布也，虽然大家都称Canvas为html5的新标签，看起来好像Canvas属于html语言的新知识，但其实Canvas画图是通过javascript来做的。所以，如果你想学习Canvas画图，你必须要有Javascript基础
HTML5 Canvas 是一种基于 JavaScript 的绘图技术，用于在网页上动态绘制图形。它并不是HTML5语言的一部分，而是通过JavaScript API实现的。因此，要掌握Canvas画图，必须具备JavaScript基础知识。Canvas就像一块画布，提供了画笔和坐标系统，允许开发者通过编程方式绘制各种图形、图像和动画。
创建一个Canvas元素是必要的。在HTML中，你可以用`<canvas>`标签来声明一块画布，例如：
```html
<canvas id="cvs" width="800" height="600">你的浏览器不支持canvas</canvas>
```
这里的`id`属性用于通过JavaScript获取Canvas元素，`width`和`height`属性定义了画布的初始尺寸。对于不支持Canvas的浏览器，可以设置备选内容，此处是“你的浏览器不支持canvas”。
需要注意的是，Canvas有两个关键的尺寸属性：一个是原生的`width`和`height`，它们定义了实际的画布大小，影响图形渲染的精度；另一个是通过CSS定义的`style.width`和`style.height`，它们只影响元素在页面上的显示大小，不改变实际的绘图区域。例如，通过JavaScript更改它们：
```javascript
canvas.width = 400;
canvas.height = 300;
canvas.style.width = '400px';
canvas.style.height = '300px';
```
改变原生宽度和高度会清除画布上的所有内容，而CSS的调整仅改变视觉效果，不会影响已绘制的图形。
要开始在Canvas上绘图，你需要获取2D渲染上下文（Context），它是绘图的主要工具：
```javascript
var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');
```
`getContext('2d')`方法返回2D绘图环境。目前，HTML5 Canvas只支持2D绘图，尽管未来可能添加3D支持。获取到的2D Context是唯一可用的，意味着你不能创建多个独立的绘图笔。如果尝试获取多个，它们实际上是同一个对象，改变一个会影响所有。
在2D坐标系统中，Canvas的左上角为(0,0)，你可以通过设置`beginPath()`, `moveTo()`, `lineTo()`, `fill()`, `stroke()`等方法来绘制线条、形状和填充。例如，绘制一条从(10,10)到(100,100)的红色直线：
```javascript
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 100);
ctx.strokeStyle = 'red';
ctx.stroke();
```
此外，Canvas还支持渐变、阴影、图片绘制以及复杂的路径和形状。你可以通过调整绘图属性（如线条宽度、填充色、透明度等）来实现各种效果。
HTML5 Canvas提供了一个强大的平台，让开发者能够利用JavaScript进行动态图形编程。它的灵活性和功能使其成为创建交互式Web应用、游戏、数据可视化和艺术作品的理想选择。然而，也需要注意性能问题，因为大量绘图操作可能影响页面的响应速度。因此，优化绘图代码和使用适当的缓存策略是提高Canvas应用性能的关键。
