我用Zdog画了一个Canvas

2021-12-23 15:26:58 浏览数 (1)

前言

什么是canvas，简单来说就是一个画布，利用js在画布上绘制图案，这个东西是我在逛好友@豆豆 的博客看到的，他画的是他的头像，感觉比较个性，作为追求个性的我就去尝试画了一下，刚开始摸索不是很熟，以至于我折腾了一下午！介绍一下折腾过程～

介绍

irils-canvas.gif

基本就是这样的效果，可拖动，可旋转有着明显的立体感，所显示类似于微笑表情的字样：RZ。 理由开源项目：Zdog制作而成！ 刚开始是打算放在我博客头部头像的那个位置的，后来发现，展示效果并不是很友好，于是就移到了 关于页面的头部～

Zdog

Zdog是github上一个优秀的伪3D绘画项目 开源地址：Zdog 介绍为：Round, flat, designer-friendly pseudo-3D engine 意为：圆形、扁平、设计师友好的伪 3D 引擎(googl是这么翻译的~) 食用起来并不是很难，看一遍文档，实际操作一下你也能绘画出nb的伪3d模型。

食用指南

这里我用我的canvas进行演示 首先在你需要展示的地方创建一个canvas画布用于呈现zdog：

代码语言：javascript复制
<canvas class="zdog-canvas" width="240" height="240"></canvas>

可设置其大小 然后将相关Zdog JavaScript文件添加到你的footer页面

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

接下来主要在zdog-demo.js上面编写代码 下面是我完整的图像绘画js，以供参考，必要注释已标注！

代码语言：javascript复制
$(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();//开始动画

});

官方文档有更多参考：文档

End

就这样，一个简单的伪3d图像就做出来了！ 如果有时间，我一定要把我头像给淦出来！？ 希望看到这篇文章的你能画出更nb的图像！

canvas 图像处理

0 人点赞