一个不能吃的中秋月饼

海上生明月，天涯共此时.

----《望月怀远》(唐·张九龄)

不觉间又到了中秋时节，相信广大朋友们都收到了公司或其他朋友送来的月饼，我相信没有人不期待中秋（假期）的来临。

“小饼如嚼月,中有酥与饴”说的就是美味的月饼，既然月饼如此深得大家的喜爱，今天咱们就用canvas画一个月饼，送个显示器前的你。

这次使用的技术栈是vue + vite 进行开发编辑工作的，(就是简单的html+css)这么简单的功能当然应该使用静态html的啦，请各 位朋友怎么方便怎么来吧~

目录结构
一个不能吃的中秋月饼_第1张图片

开始绘制
(1)第一步绘制一个富有中国元素的背景(有点密集恐惧症)

一个不能吃的中秋月饼_第2张图片

canvas {

width: 100%;

height: 100%;

background-image: repeating-radial-gradient(circle at center center,

transparent 0px,

transparent 8px,

rgba(255, 255, 255, 0.05) 8px,

rgba(255, 255, 255, 0.05) 11px,

transparent 11px,

transparent 17px,

rgba(255, 255, 255, 0.05) 17px,

rgba(255, 255, 255, 0.05) 25px,

transparent 25px,

transparent 38px,

rgba(255, 255, 255, 0.05) 38px,

rgba(255, 255, 255, 0.05) 42px),

repeating-radial-gradient(circle at center center,

rgb(230, 0, 0) 0px,

rgb(230, 0, 0) 11px,

rgb(230, 0, 0) 11px,

rgb(230, 0, 0) 19px,

rgb(230, 0, 0) 19px,

rgb(230, 0, 0) 24px,

rgb(230, 0, 0) 24px,

rgb(230, 0, 0) 33px,

rgb(230, 0, 0) 33px,

rgb(230, 0, 0) 44px,

rgb(230, 0, 0) 44px,

rgb(230, 0, 0) 46px);

background-size: 30px 30px;

cursor: pointer;

}
绘制月饼线条
接下来进入到绘制月饼的正式环节，首先我们要获取到画布，然后再绘制线条，月饼大家都知道，大部分的花纹是轴对称的展示，所以我们将其抽出，分为单独的一个个类去进行实现，最后再在底部添加我们的中秋祝福或诗句。

一个不能吃的中秋月饼_第3张图片

constructor(options) {

this.x = 0; // x轴坐标

this.y = 0; // y轴坐标

this.name = "五仁" // 馅名

this.strokeStyle = "rgb(180,110,48)"; // 线条色

this.fillStyle = "rgb(251,216,96)"; // 填充色

this.fontSize = 36; // 字体大小

this.scale = 1; // 缩放大小

Object.assign(this, options)

this.ctx = null;

this.progress = 0; // 绘制进度

this.stepFn = [] // 绘制步骤

this.isComplete = false; // 是否绘制结束

this.nowDate = new Date(); // 当前时间

this.lastDate = new Date(); // 结束时间

return this;

}

render(ctx) {

// 渲染

if (!ctx)

throw new Error("context is undefined.");

this.ctx = ctx;

this.stepFn.length = 0;

this.stepFn.push(() => this.drawEdge(180, 20))

this.stepFn.push(() => this.drawEdge(140, 12))

this.stepFn.push(() => this.drawRoundRectPath(140, 220, 40))

this.stepFn.push(() => this.drawRoundRectPath(220, 140, 40))

this.stepFn.push(() => this.drawLine(30, -110, 30, 110))

this.stepFn.push(() => this.drawLine(0, -110, 0, 110))

this.stepFn.push(() => this.drawLine(-30, -110, -30, 110))

this.stepFn.push(() => this.drawLine(-110, -30, 110, -30))

this.stepFn.push(() => this.drawLine(-110, 0, 110, 0))

this.stepFn.push(() => this.drawLine(-110, 30, 110, 30))

this.stepFn.push(() => this.drawRect(140, 140))

this.stepFn.push(() => this.drawBox(140))

this.stepFn.push(() => this.drawText())

return this;

}

draw() {

// 绘制

for (let i = 0; i < this.progress; i++) {

this.stepFn[i] && this.stepFn[i]()

}

if (this.progress > this.stepFn.length) return this.isComplete = true;

this.nowDate = new Date();

if(this.nowDate-this.lastDate>200){

this.progress++;

this.lastDate = this.nowDate;

}

}

drawBox(size) {

// 绘制折线盒子

const {ctx, x, y, strokeStyle, scale} = this;

let v = 17,

n = -size / 2;

ctx.save()

ctx.translate(x, y);

ctx.scale(scale, scale)

ctx.beginPath();

ctx.lineCap = "round";

ctx.lineWidth = 4;

ctx.strokeStyle = strokeStyle;

ctx.moveTo(v + n, n)

ctx.lineTo(v + n, size - v + n)

ctx.lineTo(size - v + n, size - v + n)

ctx.lineTo(size - v + n, v + n)

ctx.lineTo(v * 2 + n, v + n)

ctx.lineTo(v 2 + n, size - v 2 + n)

ctx.lineTo(size - v 2 + n, size - v 2 + n)

ctx.lineTo(size - v * 2 + n, 45 + n)

ctx.stroke()

ctx.restore();

}

drawLine(x1, y1, x2, y2) {

// 绘制线条

const {ctx, x, y, strokeStyle, scale} = this;

ctx.save()

ctx.translate(x, y);

ctx.scale(scale, scale)

ctx.beginPath();

ctx.lineCap = "round";

ctx.lineWidth = 4;

ctx.strokeStyle = strokeStyle;

ctx.moveTo(x1, y1)

ctx.lineTo(x2, y2)

ctx.stroke()

ctx.restore();

}

drawRect(width, height) {

// 绘制矩形

const {ctx, x, y, strokeStyle, fillStyle, scale} = this;

ctx.save()

ctx.translate(x, y);

ctx.scale(scale, scale)

ctx.beginPath();

ctx.lineCap = "round";

ctx.lineWidth = 4;

ctx.strokeStyle = strokeStyle;

ctx.fillStyle = fillStyle;

ctx.rect(-width / 2, -height / 2, width, width)

ctx.fill();

ctx.stroke()

ctx.restore();

}

drawRoundRectPath(width, height, radius) {

// 绘制圆角矩形

const {ctx, x, y, strokeStyle, fillStyle, scale} = this;

let w = -width / 2,

h = -height / 2

ctx.save()

ctx.translate(x, y);

ctx.scale(scale, scale)

ctx.lineCap = "round";

ctx.strokeStyle = strokeStyle;

ctx.fillStyle = fillStyle;

ctx.lineWidth = 5;

ctx.beginPath();

ctx.arc(width - radius + w, height - radius + h, radius, 0, Math.PI / 2);

ctx.lineTo(radius + w, height + h);

ctx.arc(radius + w, height - radius + h, radius, Math.PI / 2, Math.PI);

ctx.lineTo(w, radius + h);

ctx.arc(radius + w, radius + h, radius, Math.PI, Math.PI * 3 / 2);

ctx.lineTo(width - radius + w, h);

ctx.arc(width - radius + w, radius + h, radius, Math.PI 3 / 2, Math.PI 2);

ctx.lineTo(width + w, height - radius + h);

ctx.closePath();

ctx.stroke()

ctx.restore();

}

drawEdge(radius, lineWidth) {

// 绘制花边

const {ctx, x, y, strokeStyle, fillStyle, scale} = this;

let n = 12,

v = 360 / n,

m = 30;

ctx.save()

ctx.translate(x, y);

ctx.scale(scale, scale)

ctx.beginPath();

ctx.lineCap = "round";

for (let i = 0; i < n; i++) {

let angle1 = i v Math.PI / 180;

let angle2 = (i + 1) v Math.PI / 180;

let angle3 = (i + 0.5) v Math.PI / 180;

ctx.lineWidth = lineWidth;

ctx.strokeStyle = strokeStyle;

ctx.fillStyle = fillStyle;

let _sx = radius * Math.cos(angle1),

_sy = radius * Math.sin(angle1);

ctx.lineTo(_sx, _sy);

let _ex = radius * Math.cos(angle2),

_ey = radius * Math.sin(angle2);

let _mx = (radius + m) * Math.cos(angle3),

_my = (radius + m) * Math.sin(angle3);

ctx.bezierCurveTo(_mx, _my, _ex, _ey, _ex, _ey)

}

ctx.closePath();

ctx.stroke()

ctx.fill();

ctx.restore();

}
填充文字
drawText(n) {

// 绘制文字

const {ctx, x, y, name, fontSize, strokeStyle, scale} = this;

let size = fontSize;

ctx.save()

ctx.translate(x, y);

ctx.scale(scale, scale)

ctx.fillStyle = strokeStyle;

ctx.textAlign = "center";

ctx.font = bolder ${size}px fangsong,self

ctx.shadowColor = strokeStyle;

ctx.shadowBlur = 1;

if (name.length == 2) {

ctx.fillText(name.charAt(0), 0, -size * 0.5 + 5);

ctx.fillText(name.charAt(1), 0, size * 0.5 + 5);

}

if (name.length >= 3) {

size *= 0.7;

ctx.font = bolder ${size}px fangsong,self

ctx.fillText(name.charAt(0), 0, -size * 1 + 2);

ctx.fillText(name.charAt(1), 0, size * 0 + 2);

ctx.fillText(name.charAt(2), 0, size * 1 + 2);

}

ctx.restore();

}

一个不能吃的中秋月饼_第4张图片

添加诗句
使用canvas的filltext进行对应诗句的填充

drawText() {

const { ctx, w, h, text } = this;

ctx.save();

ctx.fillStyle = "rgb(253,190,0)";

ctx.textAlign = "center";

ctx.font = bolder 32px fangsong,self;

ctx.shadowColor = "rgb(253,190,0)";

ctx.shadowBlur = 10;

ctx.fillText(text[0].substr(0, this.textIndex), w / 2, h * 0.36 + 240);

if (text[0].length < this.textIndex) {

ctx.fillText(

text[1].substr(0, this.textIndex - text[0].length),

w / 2,

h * 0.36 + 240 + 52

);

}

ctx.restore();

},

一个不能吃的中秋月饼_第5张图片

切换不同口味

v-for="(item, index) in types"

:key="index"

class="wur"

@click="constructor(item)"

{{ item }}

data中定义口味

types: ["黑芝麻", "五仁", "蛋黄", "莲蓉", "豆沙"],
结束

这次运用到的一些图形绘制希望各位小伙伴能够灵活运用，举一反三，在中秋即将到来之际，送给朋友、同事一个不一样的中秋月饼吧~

点赞支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。

如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star: http://github.crmeb.net/u/defu不胜感激 ！

你可能感兴趣的:(vue.jsphp)

  • knob UI插件使用 换个号韩国红果果 JavaScriptjsonpknob
    图形是用canvas绘制的 js代码 var paras = { max:800, min:100, skin:'tron',//button type thickness:.3,//button width width:'200',//define canvas width.,canvas height displayInput:'tr
  • Android+Jquery Mobile学习系列(5)-SQLite数据库 白糖_ JQuery Mobile
    目录导航   SQLite是轻量级的、嵌入式的、关系型数据库，目前已经在iPhone、Android等手机系统中使用,SQLite可移植性好，很容易使用，很小，高效而且可靠。   因为Android已经集成了SQLite，所以开发人员无需引入任何JAR包，而且Android也针对SQLite封装了专属的API，调用起来非常快捷方便。   我也是第一次接触S
  • impala-2.1.2-CDH5.3.2 dayutianfei impala
    最近在整理impala编译的东西，简单记录几个要点： 根据官网的信息（https://github.com/cloudera/Impala/wiki/How-to-build-Impala）： 1. 首次编译impala，推荐使用命令： ${IMPALA_HOME}/buildall.sh -skiptests -build_shared_libs -format 2.仅编译BE ${I
  • 求二进制数中1的个数 周凡杨 java算法二进制
    解法一： 对于一个正整数如果是偶数，该数的二进制数的最后一位是 0 ，反之若是奇数，则该数的二进制数的最后一位是 1 。因此，可以考虑利用位移、判断奇偶来实现。   public int bitCount(int x){ int count = 0; while(x!=0){ if(x%2!=0){ /
  • spring中hibernate及事务配置 g21121 Hibernate
    hibernate的sessionFactory配置： <!-- hibernate sessionFactory配置 --> <bean id="sessionFactory" class="org.springframework.orm.hibernate3.LocalSessionFactoryBean"> <
  • log4j.properties 使用 510888780 log4j
    log4j.properties 使用 一.参数意义说明 输出级别的种类 ERROR、WARN、INFO、DEBUG ERROR 为严重错误 主要是程序的错误 WARN 为一般警告，比如session丢失 INFO 为一般要显示的信息，比如登录登出 DEBUG 为程序的调试信息 配置日志信息输出目的地 log4j.appender.appenderName = fully.qua
  • Spring mvc-jfreeChart柱图（2） 布衣凌宇 jfreechart
    上一篇中生成的图是静态的，这篇将按条件进行搜索，并统计成图表，左面为统计图，右面显示搜索出的结果。 第一步：导包 第二步；配置web.xml(上一篇有代码) 建BarRenderer类用于柱子颜色 import java.awt.Color; import java.awt.Paint; import org.jfree.chart.renderer.category.BarR
  • 我的spring学习笔记14-容器扩展点之PropertyPlaceholderConfigurer aijuans Spring3
    PropertyPlaceholderConfigurer是个bean工厂后置处理器的实现，也就是BeanFactoryPostProcessor接口的一个实现。关于BeanFactoryPostProcessor和BeanPostProcessor类似。我会在其他地方介绍。 PropertyPlaceholderConfigurer可以将上下文（配置文件）中的属性值放在另一个单独的标准java
  • maven 之 cobertura 简单使用 antlove maventestunitcoberturareport
    1. 创建一个maven项目 2. 创建com.CoberturaStart.java package com; public class CoberturaStart { public void helloEveryone(){ System.out.println("=================================================
  • 程序的执行顺序 百合不是茶 JAVA执行顺序
          刚在看java核心技术时发现对java的执行顺序不是很明白了,百度一下也没有找到适合自己的资料,所以就简单的回顾一下吧   代码如下;     经典的程序执行面试题 //关于程序执行的顺序 //例如： //定义一个基类 public class A(){ public A(
  • 设置session失效的几种方法 bijian1013 web.xmlsession失效监听器
    在系统登录后，都会设置一个当前session失效的时间，以确保在用户长时间不与服务器交互，自动退出登录，销毁session。具体设置很简单，方法有三种：（1）在主页面或者公共页面中加入：session.setMaxInactiveInterval(900);参数900单位是秒，即在没有活动15分钟后，session将失效。这里要注意这个session设置的时间是根据服务器来计算的，而不是客户端。所
  • java jvm常用命令工具 bijian1013 javajvm
    一.概述         程序运行中经常会遇到各种问题，定位问题时通常需要综合各种信息，如系统日志、堆dump文件、线程dump文件、GC日志等。通过虚拟机监控和诊断工具可以帮忙我们快速获取、分析需要的数据，进而提高问题解决速度。 本文将介绍虚拟机常用监控和问题诊断命令工具的使用方法，主要包含以下工具:       &nbs
  • 【Spring框架一】Spring常用注解之Autowired和Resource注解 bit1129 Spring常用注解
    Spring自从2.0引入注解的方式取代XML配置的方式来做IOC之后，对Spring一些常用注解的含义行为一直处于比较模糊的状态，写几篇总结下Spring常用的注解。本篇包含的注解有如下几个： Autowired Resource Component Service Controller Transactional 根据它们的功能、目的，可以分为三组，Autow
  • mysql 操作遇到safe update mode问题 bitray update
        我并不知道出现这个问题的实际原理,只是通过其他朋友的博客,文章得知的一个解决方案,目前先记录一个解决方法,未来要是真了解以后,还会继续补全.     在mysql5中有一个safe update mode,这个模式让sql操作更加安全,据说要求有where条件,防止全表更新操作.如果必须要进行全表操作,我们可以执行 SET
  • nginx_perl试用 ronin47 nginx_perl试用
    因为空闲时间比较多，所以在CPAN上乱翻，看到了nginx_perl这个项目(原名Nginx::Engine)，现在托管在github.com上。地址见：https://github.com/zzzcpan/nginx-perl 这个模块的目的，是在nginx内置官方perl模块的基础上，实现一系列异步非阻塞的api。用connector/writer/reader完成类似proxy的功能（这里
  • java-63-在字符串中删除特定的字符 bylijinnan java
    public class DeleteSpecificChars { /** * Q 63 在字符串中删除特定的字符 * 输入两个字符串，从第一字符串中删除第二个字符串中所有的字符。 * 例如，输入”They are students.”和”aeiou”，则删除之后的第一个字符串变成”Thy r stdnts.” */ public static voi
  • EffectiveJava--创建和销毁对象 ccii 创建和销毁对象
    本章内容： 1. 考虑用静态工厂方法代替构造器 2. 遇到多个构造器参数时要考虑用构建器（Builder模式） 3. 用私有构造器或者枚举类型强化Singleton属性 4. 通过私有构造器强化不可实例化的能力 5. 避免创建不必要的对象 6. 消除过期的对象引用 7. 避免使用终结方法 1. 考虑用静态工厂方法代替构造器     类可以通过
  • [宇宙时代]四边形理论与光速飞行 comsci
       从四边形理论来推论 为什么光子飞船必须获得星光信号才能够进行光速飞行？    一组星体组成星座  向空间辐射一组由复杂星光信号组成的辐射频带，按照四边形-频率假说  一组频率就代表一个时空的入口    那么这种由星光信号组成的辐射频带就代表由这些星体所控制的时空通道，该时空通道在三维空间的投影是一
  • ubuntu server下python脚本迁移数据 cywhoyi pythonKettlepymysqlcx_Oracleubuntu server
    因为是在Ubuntu下，所以安装python、pip、pymysql等都极其方便，sudo apt-get install pymysql， 但是在安装cx_Oracle（连接oracle的模块）出现许多问题，查阅相关资料，发现这边文章能够帮我解决，希望大家少走点弯路。http://www.tbdazhe.com/archives/602 1.安装python 2.安装pip、pymysql
  • Ajax正确但是请求不到值解决方案 dashuaifu Ajaxasync
    Ajax正确但是请求不到值解决方案   解决方案：1 .     async: false ,    2.     设置延时执行js里的ajax或者延时后台java方法！！！！！！！   例如：   $.ajax({     &
  • windows安装配置php+memcached dcj3sjt126com PHPInstallmemcache
    Windows下Memcached的安装配置方法 1、将第一个包解压放某个盘下面，比如在c:\memcached。 2、在终端（也即cmd命令界面）下输入 'c:\memcached\memcached.exe -d install' 安装。 3、再输入： 'c:\memcached\memcached.exe -d start' 启动。（需要注意的: 以后memcached将作为windo
  • iOS开发学习路径的一些建议 dcj3sjt126com ios
    iOS论坛里有朋友要求回答帖子，帖子的标题是： 想学IOS开发高阶一点的东西，从何开始，然后我吧啦吧啦回答写了很多。既然敲了那么多字，我就把我写的回复也贴到博客里来分享，希望能对大家有帮助。欢迎大家也到帖子里讨论和分享，地址：http://bbs.csdn.net/topics/390920759   下面是我回复的内容：   结合自己情况聊下iOS学习建议，
  • Javascript闭包概念 fanfanlovey JavaScript闭包
    1.参考资料 http://www.jb51.net/article/24101.htm http://blog.csdn.net/yn49782026/article/details/8549462 2.内容概述 要理解闭包，首先需要理解变量作用域问题 内部函数可以饮用外面全局变量 var n=999; 　　functio
  • yum安装mysql5.6 haisheng mysql
    1、安装http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm   2、yum install mysql   3、yum install mysql-server   4、vi /etc/my.cnf   添加character_set_server=utf8
  • po/bo/vo/dao/pojo的详介 IT_zhlp80 javaBOVODAOPOJOpo
        JAVA几种对象的解释 PO:persistant object持久对象,可以看成是与数据库中的表相映射的java对象。最简单的PO就是对应数据库中某个表中的一条记录，多个记录可以用PO的集合。PO中应该不包含任何对数据库的操作. VO:value object值对象。通常用于业务层之间的数据传递，和PO一样也是仅仅包含数据而已。但应是抽象出的业务对象,可
  • java设计模式 kerryg java设计模式
    设计模式的分类：    一、 设计模式总体分为三大类： 1、创建型模式（5种）：工厂方法模式，抽象工厂模式，单例模式，建造者模式，原型模式。 2、结构型模式（7种）：适配器模式，装饰器模式，代理模式，外观模式，桥接模式，组合模式，享元模式。 3、行为型模式（11种）：策略模式，模版方法模式，观察者模式，迭代子模式，责任链模式，命令模式，备忘录模式，状态模式，访问者
  • [1]CXF3.1整合Spring开发webservice——helloworld篇 木头.java springwebserviceCXF
    Spring 版本3.2.10 CXF 版本3.1.1 项目采用MAVEN组织依赖jar 我这里是有parent的pom，为了简洁明了，我直接把所有的依赖都列一起了，所以都没version，反正上面已经写了版本 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="ht
  • Google 工程师亲授：菜鸟开发者一定要投资的十大目标 qindongliang1922 工作感悟人生
    身为软件开发者，有什么是一定得投资的？ Google 软件工程师 Emanuel Saringan 整理了十项他认为必要的投资，第一项就是身体健康，英文与数学也都是必备能力吗？来看看他怎么说。（以下文字以作者第一人称撰写）） 你的健康 无疑地，软件开发者是世界上最久坐不动的职业之一。 每天连坐八到十六小时，休息时间只有一点点，绝对会让你的鲔鱼肚肆无忌惮的生长。肥胖容易扩大罹患其他疾病的风险，
  • linux打开最大文件数量1,048,576 tianzhihehe clinux
    File descriptors are represented by the C int type. Not using a special type is often  considered odd, but is, historically, the Unix way. Each Linux process has a maximum number of files th
  • java语言中PO、VO、DAO、BO、POJO几种对象的解释 衞酆夼 javaVOBOPOJOpo
    PO:persistant object持久对象 最形象的理解就是一个PO就是数据库中的一条记录。好处是可以把一条记录作为一个对象处理，可以方便的转为其它对象。可以看成是与数据库中的表相映射的java对象。最简单的PO就是对应数据库中某个表中的一条记录，多个记录可以用PO的集合。PO中应该不包含任何对数据库的操作。 BO:business object业务对象 封装业务逻辑的java对象
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他