详谈Canvas从入门到猪头

一、Canvas简介
1.1 什么是canvas
ASP站长网Canvas(画布)是在HTML5中新增的标签用于在网页实时生成图像，可以操作图像内容，是一个可以用JavaScript操作的位图(bitmap)。
 
1.2 canvas的坐标系统
canvas的坐标系统如下图所示，其具有如下特点：
 
x轴正方向向右、y轴正方向向下
画布的原点在左上角
横纵坐标单位为像素
每个轴的最小单元为一个像素(栅格)
 
 
1.3 canvas的绘制流程
创建一个标签
获取canvas元素对应的DOM对象，这是一个Canvas对象
调用Canvas对象的getContext()方法，该方法返回一个CanvasRenderingContext2D对象，该对象即可绘制图形
调用CanvasRenderingContext2D对象的方法绘图
1.4 canvas的应用领域
canvas这个神奇的东西有很多领域可以得到应用，下面我们一起唠一唠。
 
游戏：canvas 在基于 Web 的图像显示方面比 Flash 更加立体、更加精巧，canvas 游戏在流畅度和跨平台方面更优秀，例如这25款canvas游戏
可视化的库：Echart
banner广告：Canvas 实现动态的广告效果非常合适
图形编辑器：后续Photoshop能够100%基于Web实现
微信读书、腾讯文档均是通过canvas实现
二、基础功能
通过第一章对canvas有了初步的认识，本章就按照一个人绘制一幅画的思路进行演化，逐步了解canvas的基本功能，从而更好的使用它实现一些酷炫的效果。
 
2.1 坐标系选择
当要绘制一幅画时首先要确定坐标系，只有选择好了坐标系之后才好动笔，在canvas中默认坐标系在左上角(X轴正方向向右、Y轴正方向向下)，可是有的时候需要变换坐标系才能更方便的实现所需的效果，此时需要变换坐标系，canvas提供了以下几种变换坐标系的方式：
 
translate(dx，dy)：平移坐标系。相当于把原来位于(0，0)位置的坐标原点平移到(dx、dy)点。
rotate(angle)：旋转坐标系。该方法控制坐标系统顺时针旋转angle弧度。
scale(sx，sy)：缩放坐标系。该方法控制坐标系统水平方向上缩放sx，垂直方向上缩放sy。
transform(a,b,c,d,e,f)：允许缩放、旋转、移动并倾斜当前的环境坐标系，其中a表示水平缩放、b表示水平切斜、c表示垂直切斜、d表示垂直缩放、e表示水平移动、f表示垂直移动。
 
 
function main() {
    const canvas = document.getElementById('canvasId');
    const ctx = canvas.getContext('2d');
    ctx.lineWidth = 4;
    // 默认
    ctx.save();
    ctx.strokeStyle = '#F00';
    drawCoordiante(ctx);
    ctx.restore();
 
    // 平移
    ctx.save();
    ctx.translate(150, 150);
    ctx.strokeStyle = '#0F0';
    drawCoordiante(ctx);
    ctx.restore();
 
    // 旋转
    ctx.save();
    ctx.translate(300, 300);
    ctx.rotate(-Math.PI / 2);
    ctx.strokeStyle = '#00F';
    drawCoordiante(ctx);
    ctx.restore();
 
    // 缩放
    ctx.save();
    ctx.translate(400, 400);
    ctx.rotate(-Math.PI / 2);
    ctx.scale(0.5, 0.5);
    ctx.strokeStyle = '#000';
    drawCoordiante(ctx);
    ctx.restore();
}
 
function drawCoordiante(ctx) {
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(120, 0);
    ctx.moveTo(0, 0);
    ctx.lineTo(0, 80);
    ctx.closePath();
    ctx.stroke();
}
 
main();
2.2 图形绘制
坐标系选择好了之后，就要开始动笔创作大作了，那么canvas到底允许绘制哪些内容呢?
 
直线
 
function drawLine(ctx, startX, startY, endX, endY) {
    ctx.moveTo(startX, startY);
    ctx.lineTo(endX, endY);
    ctx.stroke();
}
圆弧
 
function drawCircle(ctx, x, y, R, startAngle, endAngle) {
    ctx.arc(x, y, R, startAngle, endAngle);
    ctx.stroke();
}
曲线
 
// 贝济埃曲线
function drawBezierCurve(ctx, cpX1, cpY1, cpX, cpY2, endX, endY) {
    ctx.bezierCurveTo(cpX1, cpY1, cpX, cpY2, endX, endY);
    ctx.stroke();
}
// 二次曲线
function drawQuadraticCurve(ctx, cpX, cpY, endX, endY) {
    ctx.quadraticCurveTo(cpX, cpY, endX, endY);
    ctx.stroke();
}