我用Zdog画了一个Canvas

<canvas class="zdog-canvas" width="240" height="240"></canvas>

<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>//导入zdog引擎
<script src="zdog-demo.js"></script>//用于绘画你的图像

$(function() {
//制作zdog

const TAU = Zdog.TAU; //设置常量TAU
let isSpinning = true;//动画开启
var sceneStartRotation = { y:-TAU/1 };//逆时针开始旋转

   // 创建 illo 布局 
const illo = new Zdog.Illustration({
   // 选择class设置画布
  element: '.zdog-canvas',//你所创建canvas的class名
  zoom: 4, //按比例缩放整个场景。
  dragRotate: true,//通过拖动启用旋转场景
  onDragStart: function() {//当拖动的时候动画关闭
  isSpinning = false;
  },
});

//创建一个组，取名Group
var Group = new Zdog.Group({
  addTo: illo,//添加组到所创建的illo布局上
  translate: { z: 0 },
  //这个组在illo布局所在的位置，可设置x，y，z
});

//在组里面创建一个圆柱（Cylinder）作为脸，取名face
let face = new Zdog.Cylinder({
  addTo: Group,//把这个face添加到组
  diameter: 35,//圆柱的直径
  length: 5,//圆柱的长度
  color: '#ededed',//正面的颜色
  frontFace: '#fff',//中间的颜色
  backface: '#c1c1c1',//背面的颜色
});

//在组里面创建一个形状（Shape），展示为rz的r
new Zdog.Shape({
  addTo: Group,//把这个形状添加到组
  translate: { x: -12, y: -5},//这个形状在组的位置
  path: [  //设置形状的路径
    { x: 10, y: -4},// 从左上角开始
    { x:  3, y: -4},// 线到右上角
    { x:  3, y: -4},// 线到左下
    { x:  3, y:  4},// 线到右下角
  ],
  closed: false,//设置这个形状为打开状态
  stroke: 2,//这个形状的粗细程度
  color: '#000',//这个形状的颜色
  backface: false,//正面朝后时隐藏
});

//在组里面创建一个形状（Shape），展示为rz的z
new Zdog.Shape({
  addTo: Group,//把这个形状添加到组
  translate: { x: 5, y: -5 },//这个形状在组的位置
  path: [//设置形状的路径
    { x: -3, y: -4 }, // 从左上角开始
    { x:  3, y: -4 }, // 线到右上角
    { x: -3, y:  4 }, // 线到左下
    { x:  3, y:  4 }, // 线到右下角
  ],
  closed: false,//设置这个形状为打开状态
  stroke: 2,//这个形状的粗细程度
  color: '#000',//这个形状的颜色
  backface: false,//正面朝后时隐藏
});

//在组里面创建一个椭圆（Ellipse），展示为微笑
new Zdog.Ellipse({
  addTo: Group,//把这个形状添加到组
  diameter: 15,//这个椭圆的直径
  quarters: 2, // 设置椭圆的1/几 ，这里设置1/2就是半圆
  translate: { x: -1.5, y: 3},//这个形状在组的位置
  // rotate semi-circle to point up
  rotate: { z: Zdog.TAU/4 },//顺时针旋转 z: -Zdog.TAU/4 即为逆时针旋转
  color: "000",//这个椭圆的颜色
  stroke: 2,//这个形状的粗细程度
  backface: false,//正面朝后时隐藏
});


var ticker = 0;
var cycleCount = 240;//旋转速度
function animate() {
  // update
  if ( isSpinning ) {
    var progress = ticker / cycleCount;
    var theta = Zdog.easeInOut( progress % 1 ) * TAU;//当旋转到正面停留的时间
    illo.rotate.y = theta + sceneStartRotation.y;
    ticker++;
  } 
  illo.updateRenderGraph();//更新渲染图
  requestAnimationFrame( animate );//请求动画帧
}
animate();//开始动画

});