CSS+Canvas

--- theme: Chinese-red --- 我正在参加「兔了个兔」创意投稿大赛，详情请看：[「兔了个兔」创意投稿大赛](https://juejin.cn/post/718510499480

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛 本文技术栈：React + Antd 布局随便写的，主要是咱不是 UI，就随便整一点居中布局就行。 Button 按钮 + Se

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛 基础页面结构 初始化数据 翻转逻辑 点击 item 时，将 showName 变为 true，改变类名，实现翻转效果。 coun

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛 初始化 canvas 定义常量 绘制外形圆圈 印章名称 环形文字 中心图片 这样子，我们的兔年印章就完美实现了。 jcode

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！ Reach + Echarts 模拟实现一个大概类似的。 安装命令 或者 初始使用 要变成这个样子 1.删除 tooltip 和 legen

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！ 之前的文章，咱们介绍过横向和竖向，具体的内容，请看 React + CSS 绘制横向柱状图 React + CSS 绘制竖状柱状图 这次，结

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！ 这个价格还是相当感人的 咱这辛苦的打工人，要写多少行代码才能买的起啊 外部轮廓 外部边框 里面白色内容 按键 iPhone 14Pro 最大

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！ Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。 display: grid指定

我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！ 404页面是网站必备的一个页面，通常为用户访问了网站上不存在或已删除的页面，服务器返回的404错误。 这个既可以简单，也可以复杂。 如

一大早来到办公室， 部分女同事的桌面上已经 摆好了鲜花、礼物， 等待着她们惊喜的尖叫。 而自己的桌面上， 只有昨天忘了扔的快餐盒 …… 下班后， 单身人群的舒适空间进一步逼仄起来， 地铁广告牌、商业街

基础页面结构 点击旋转 需要用到 JS 吗？当然不需要，CSS 就可以解决这一切。 是不是动起来了呀。 但问题是二者同时存在，那这个是不是还是需要用到 JS 来控制显示与隐藏。不不不，opacity

基础的页面结构 这个样子。。。。 还行吧 初始化一些变量，获取 canvas 元素，获取 ctx 上下文。为 canvas 设置画笔的颜色，填充色。hearts 数组为后面设置爱心的数组。 onRes

平时浏览一些购物网站常常有一些抽奖的环节它们就会使用一种刮刮乐的形式给用户发一些优惠券或者其它的一些奖品。 今天我们就来简单实现一下。 页面的基本结构 （图片我就随便找了一个，大家用的时候，进行替换吧

最开始的时候，通过 document.querySelector("#canvas") 获取到页面的 canvas 元素。使用变量记录 canvas 的宽和高。通过 ctx.arc 来画圆。 有点丑？