在 canvas 上绘制一个简易的小车图标并控制运动

我正在参加 码上掘金体验活动，详情：show出你的创意代码块

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第 13 天，点击查看活动详情。

十分钟上手 canvas，对着 demo 来，包会！ 这篇文章介绍了 canvas 的基本用法，这里再补充一个常用的图形变化的方法 translate(x, y)

context.translate(x, y)

指将 坐标轴 平移到 (x, y) 点

需要明确一个概念，所有的图形绘制操作，都是基于坐标轴的相对位置！！

在默认情况下，坐标原点为 (0, 0)，图形的绝对坐标和相对坐标没有差别

当我们需要在 (x, y) 点绘制一个复杂的图形时，第一个想到的方法就是围绕 (x, y) 点设计；更深一层就是抽象为，为图形中的所有坐标，添加一个偏移量，后续其他地方需要使用时修改偏移量即可；这种思路下，我们只需要考虑以 (0, 0) 点为图形的中心点直接设计即可

在 canvas 中，同样的，以 (0, 0) 为中心设计好通用的图形构建，然后，通过 translate 修改坐标轴的位置，绘制的图形就像在原来坐标的指定点绘制；需要注意：这样修改了坐标系，等组件绘制完成后，需要复位坐标系到 (0, 0)，以免后续的绘制出现意外

设计一个小车图标

基于 (0, 0) 点设计，由一个折线和空心圆构成，设计的代码封装为函数后，如下：

function drawCar(x, y, angle, color = 'red', text = '01') {
    context.clearRect(0, 0, 1000, 1000)
    // 角度设计为向上了，加 90 度旋转到向右
    angle += 90;
    angle *= Math.PI / 180;
    context.save();
    context.translate(x, y);
    context.rotate(angle);
    setCtx(1, color)
    context.shadowBlur = 5;
    context.shadowColor = color;
    // 底图
    drawLines(-50, 0, 50, 0, 0, -70, -50, 0)
    context.fill()
    drawCircle(0, 0, 50)
    // 覆盖白色小号图形
    setCtx(1, '#fff')
    drawLines(-40, 0, 40, 0, 0, -60, -40, 0)
    context.fill()
    drawCircle(0, 0, 45)
    setCtx(1, '#3339')
    context.shadowBlur = 0;
    context.font = '50px bold';
    context.rotate(-angle)
    let arr = [0, -16, -28, -44]; // 判断字符串长度
    context.fillText(text, arr[(text + '').length], 20);
    context.restore();
}

其间封装了画点画线和设置颜色的函数，就没有贴上来了

实际效果下图：

码上掘金

将完整的 demo 搬入到 playground，并且，添加一个 WASD 方向交互 效果，欢迎各位体验