首先对canvas基础语法进行一定的了解和学习，语句不多很快就可以看完用法，然后实战画一个《机器人》和《 Hello Kitty》，实操多了就会对canvas有更深的理解。（后附源代码）

canvas基础

准备工作

body标签中先直接添加<canvas> <canvas/>标签，Canvas（画布）默认宽高：300*150 在js中，想使用canvas，要先获取canvas标签， var canvas = document.getElementById('myCanvas');再获取canvas的绘图环境： var ctx = canvas.getContext('2d'); canvas的长宽（大小）只能用行内嵌入的样式或者用js设置。设置宽度为800，高度为800： canvas.width=800; canvas.height=800;

基础绘图

画线段

ctx.moveTo(0, 0);//绘制的原点(起点).moveTo()
ctx.lineTo(100, 100);//绘制的终点.lineTo()
ctx.lineTo(100, 200);
ctx.strokeStyle = '#F00';//设置线段的样式/颜色
ctx.stroke();//绘制路径.stroke()

如果连接两个lineTo就是从原有的基础上再接着绘制，如果超出画布的大小，则无法显示。

画三角形

三条不同颜色的线组成的三角形

ctx.moveTo(300,100);
ctx.lineTo(500,400);
ctx.strokeStyle = "#00F";
ctx.stroke();
ctx.beginPath();//.beginPath()清除之前画的路径，重新开始新的路径
ctx.moveTo(500,400);
ctx.lineTo(100,400);
ctx.strokeStyle = "#0F0";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100,400);
ctx.lineTo(300,100);
ctx.strokeStyle = "#F00";
ctx.stroke();

画圆

ctx.arc(300,300,50,0,2*Math.PI,true);//参数：300--圆心x、300--圆心y、50--半径、0,2*Math.P--弧度范围、true--逆时针/false顺时针；
ctx.strokeStyle = '#000';
ctx.stroke();

矩形

ctx.strokeRect(300，100，200,100);//无需再使用ctx.stroke（）,已经封装在内；
//参数：300，100--左上角坐标，200--宽度，100--高度

填充

ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.lineTo(100,200);
ctx.closePath();//闭合路径，此处为一个三角形
ctx.lineWidth = 10;//lineWidth 设置描边的线宽
ctx.strokeStyle = "#F00";//strokeStyle 设置描边样式
ctx.stroke();
ctx.fillStyle = "rgba(0,255,0,0.5)";//fillStyle 设置填充样式
ctx.fill();//填充，相当于绘制路径中的stroke()

ctx.strokeRect(100,200,100,100);//绘制一个矩形路径
ctx.fillRect(100,200,100,100);//填充一个矩形

ctx.beginPath();
ctx.arc(300,100,50,0,2*Math.PI,true);
ctx.fillStyle = "rgba(0,0,255,0.5)";
ctx.fill();//填充一个圆

二次样条曲线和贝塞尔曲线

//绘制二次样条曲线
ctx.moveTo(100,355);//moveTo()为曲线两端的第一个点；
ctx.quadraticCurveTo(265,145,380,349);//265,145为中间点（影响曲线曲度），380,349为末端点
ctx.stroke();

//绘制贝塞尔曲线
ctx.beginPath();
ctx.moveTo(175,375);//moveTo()为曲线两端的第一个点；
ctx.bezierCurveTo(297,182,468,252,517,380);//297,182中间第一个点 468,252中间第二个点 517,380末端点
ctx.stroke();

基本用到的基础就这么多了，还有平移、转换、阴影、图片、裁剪、离屏等等就不在这一篇章讲了，有兴趣可以自行去百度搜索了解学习。

小案例一：机器人

（案例图片原图引自慕课网课程，如有侵权，请联系作者删除，源代码是作者自行编译）
用的都是上面所说的基础，希望看了上面的基础，可以自行思考画出来，需要画成这个样子：

源代码：github地址含主要代码注释

小案例二：Hello Kitty

（案例图片原图引自慕课网课程，如有侵权，请联系作者删除，源代码是作者自行编译）
成品效果如下：

源代码：github地址含主要代码注释

多谢观看，如有错误，希望联系或评论指出，谢谢！