我用Zdog画了一个Canvas

前言

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

介绍

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

Zdog

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

食用指南

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

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

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

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

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

$(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的图像!

Comments ( 14 评论)

wave
  1. 浅小沫

    2个月前

    png能实现这个转动效果吗?

    Android · Google Chrome
    1. 若志奕鑫 博主

      2个月前

      @浅小沫 ,应该不能吧 ,没试过

      Windows 10 · Google Chrome
  2. 独元殇

    2个月前

    我刚开始把鼠标放图片上以为它在随我的鼠标动,后来发现我想的多了,这就是张GIF

    Linux · Google Chrome
    1. 若志奕鑫 博主

      2个月前

      @独元殇 ,canvas我放在了关于页面,现在文章内容还不支持canvas

      Windows 10 · Google Chrome
  3. 清墨的橘

    2个月前

    字体有点模糊, 压抑。 另外 代码高亮你也不搞一下?

    Windows 7 · Google Chrome
    1. 若志奕鑫 博主

      2个月前

      @清墨的橘 ,就这样,一切从简。

      Windows 10 · Google Chrome
  4. 清墨的橘

    2个月前

    文字的配色感觉还是有点怪怪的!

    Windows 7 · Google Chrome
    1. 若志奕鑫 博主

      2个月前

      @清墨的橘 ,怎么说

      Windows 10 · Google Chrome
  5. 清墨的橘

    2个月前

    大大的违和感

    Windows 7 · Google Chrome
    1. 若志奕鑫 博主

      2个月前

      @清墨的橘 ,是头部背景图片影响嘛,现在应该好一点

      Windows 10 · Google Chrome
  6. 活溢流

    2个月前

    有时间我也淦一个

    iPhone · QQ Browser
    1. 若志奕鑫 博主

      2个月前

      @活溢流 ,淦就完了

      Windows 10 · Google Chrome
  7. 豆豆

    2个月前

    Windows 10 · QQ Browser
    1. 若志奕鑫 博主

      2个月前

      @豆豆

      Android · Google Chrome
悄悄话

搜索