入门canvascanvas和SVG的区别 SVG是使用XML标签来绘制图形的，而canvas是通过js当笔刷绘制图形的

canvas和SVG的区别

SVG是使用XML标签来绘制图形的，而canvas是通过js当笔刷绘制图形的。

正文

canvas是HTML5新增的标签，这个标签会占据一块页面区域，根据其自身提供的api，动态的在画布上绘制图片。

创建< canvas>元素时至少要设置width和height属性来表示画布的宽和高；

要在画布上绘制图形，首先要取得绘图上下文。使用getContext()方法可以获取对绘图上下文的引用。

<canvas id="drawing" width="200" height="200">
    A drawing of something.
</canvas>
<script>
    let drawing = document.getElementById("drawing");
    // 确保浏览器支持 
    if (drawing.getContext) {
        // 需要给这个方法传入参数‘2d’表示要获取2D上下文对象。
        let context = drawing.getContext("2d");
        // 其他代码 
    }
</script>

2D绘图上下文提供了绘制2D图形的方法，包括矩形、弧形和路径。它的坐标原点（0，0）默认在canvas画布的左上角。

填充和描边

2D 上下文有两个基本绘制操作：填充（fillStyle）和描边（strokeStyle）。相当于css里的background-color和border-color

<script>
    let drawing = document.getElementById("drawing");
    if (drawing.getContext) {
        let context = drawing.getContext("2d");
        context.strokeStyle = "red";
        context.fillStyle = "#0000ff";
    }
</script>

绘制矩形

绘制矩形的3个相关api,都接收4个参数，x坐标、y坐标、矩形宽度和矩形高度：

fillRect()
strokeRect();
clearRect();

<script>
    let drawing = document.getElementById("drawing");
    if (drawing.getContext) {
        let context = drawing.getContext("2d");
        // 绘制红色矩形 
        context.fillStyle = "#ff0000"; 
        context.fillRect(10, 10, 50, 50); 
        // 绘制半透明蓝色矩形 
        context.fillStyle = "rgba(0,0,255,0.5)"; 
        context.fillRect(30, 30, 50, 50);
    }
</script>

以上代码先将 fillStyle 设置为红色并在坐标点(10, 10)绘制了一个宽高均为 50 像素的矩形。接着，使用 rgba()格式将 fillStyle 设置为半透明蓝色，并绘制了另一个与第一个部分重叠的矩形。结果就是可以透过蓝色矩形看到红色矩形。

<script>
    let drawing = document.getElementById("drawing");
    if (drawing.getContext) {
        let context = drawing.getContext("2d");
        // 绘制红色矩形 
        context.strokeStyle = "#ff0000"; 
        context.strokeRect(10, 10, 50, 50); 
        // 绘制半透明蓝色矩形 
        context.strokeStyle = "rgba(0,0,255,0.5)"; 
        context.strokeRect(30, 30, 50, 50);
    }
</script>

以上代码同样绘制了两个重叠的矩形，不过只有轮廓，而不是实心的。

<script>
    let drawing = document.getElementById("drawing");
    if (drawing.getContext) {
        let context = drawing.getContext("2d");
        // 绘制红色矩形 
        context.fillStyle = "#ff0000"; 
        context.fillRect(10, 10, 50, 50); 
        // 绘制半透明蓝色矩形 
        context.fillStyle = "rgba(0,0,255,0.5)"; 
        context.fillRect(30, 30, 50, 50);
        
        // 在前两个矩形重叠的区域擦除一个矩形区域
        context.clearRect(40, 40, 10, 10);
    }
</script>

以上代码在两个矩形重叠的区域上擦除了一个小矩形

绘制路径

2D绘图上下文支持绘制路径的api 通过路径可以创建复杂的形状和线条，绘制路径前需要调用beginPath()

arc(x, y, radius, startAngle, endAngle, counterclockwise)：以坐标(x, y)为圆心，以 radius 为半径绘制一条弧线，起始角度为 startAngle，结束角度为 endAngle（都是弧度）。最后一个参数 counterclockwise 表示是否逆时针计算起始角度和结束角度（默认为顺时针）。

// 创建路径
context.beginPath();
// 绘制圆形
context.arc(100, 100, 99, 0, 2 * Math.PI, false);
// 描边
context.stroke();

arcTo(x1, y1, x2, y2, radius)：以给定半径 radius，经由(x1, y1)绘制一条从上一点到(x2, y2)的弧线。
bezierCurveTo(c1x, c1y, c2x, c2y, x, y)：以(c1x, c1y)和(c2x, c2y)为控制点，绘制一条从上一点到(x, y)的弧线（三次贝塞尔曲线）。
lineTo(x, y)：绘制一条从上一点到(x, y)的直线。
moveTo(x, y)：不绘制线条，只把绘制光标移动到(x, y)。 - quadraticCurveTo(cx, cy, x, y)：以(cx, cy)为控制点，绘制一条从上一点到(x, y) 的弧线（二次贝塞尔曲线）。
... 创建路径之后，可以使用 closePath()方法绘制一条返回起点的线。如果路径已经完成，则既可以指定 fillStyle 属性并调用 fill()方法来填充路径，也可以指定 strokeStyle 属性并调用 stroke()方法来描画路径，

绘制文本

font：以 CSS 语法指定的字体样式、大小、字体族等，比如"10px Arial"。
textAlign：指定文本的对齐方式，可能的值包括"start"、"end"、"left"、"right"和 "center"。推荐使用"start"和"end"，不使用"left"和"right"，因为前者无论在从左到右书写的语言还是从右到左书写的语言中含义都更明确。
textBaseLine ：指定文本的基线，可能的值包括 "top" 、 "hanging" 、 "middle" 、 "alphabetic"、"ideographic"和"bottom"。