canvas画案例《机器人》和《Hello Kitty》

首先对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地址含主要代码注释

多谢观看，若有错误，但愿联系或评论指出，谢谢！