1.定义
一块矩形画布，可以控制其中的每一像素
2.原理
通过控制每一个像素进行绘制，通过每一帧的绘制及更新达到动画的效果
3.准备
<canvas id="myCanvas" width="300" height="200"></canvas>
<script> var canvas = document.getElementById('myCanvas') //【DOM获取canvas节点】 var ctx = canvas.getContext('2d'); //【绘制2D图像】 </script>
4.例子
A.先建立canvas元素
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. // 作为浏览器不支持Canvas时的提示 </canvas>
可以参考HTML canvas参考文档
例如现在要绘制一个HELLO WORLD
可以先设置字体的样式，属性
ctx.font="30px Arial";
具体的语法：语法：ctx.font = "font-stylefont-variantfont-weightfont-size/line-heightfont-family"
通过设置 ctx.fillStyle = "color"，调用 ctx.fillText(str,startX,startY) 方法进行绘制
ctx.fillStyle = "blue" / "#0000ff" ctx.fillText("Hello World",10,50);
效果：
