使用canvas绘制一个会唱、跳、rap...

最新推荐文章于 2024-08-21 14:09:37 发布
最新推荐文章于 2024-08-21 14:09:37 发布
阅读量194 收藏
点赞数 9
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60189088/article/details/140015028
版权 
<template>
  <canvas id="canvas" class="canvasClass" width="1000" height="900" ref="canvasRef"></canvas>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';

const canvasRef = ref(null)

onMounted(() => {
  console.log("canvasRef.value", canvasRef.value)
  setPictures()
})

function setPictures() {
  const canvas = document.getElementById("canvas")
  let ctx = canvas.getContext("2d")

  // 网格
  //#region 
  ctx.beginPath()
  ctx.strokeStyle = '#C0C0C0'
  ctx.lineWidth = 1
  ctx.moveTo(100, 0)
  ctx.lineTo(100, 900)
  ctx.moveTo(200, 0)
  ctx.lineTo(200, 900)
  ctx.moveTo(300, 0)
  ctx.lineTo(300, 900)
  ctx.moveTo(400, 0)
  ctx.lineTo(400, 900)
  ctx.moveTo(500, 0)
  ctx.lineTo(500, 900)
  ctx.moveTo(600, 0)
  ctx.lineTo(600, 900)
  ctx.moveTo(700, 0)
  ctx.lineTo(700, 900)
  ctx.moveTo(800, 0)
  ctx.lineTo(800, 900)
  ctx.moveTo(900, 0)
  ctx.lineTo(900, 900)
  ctx.moveTo(0, 100)
  ctx.lineTo(1000, 100)
  ctx.moveTo(0, 200)
  ctx.lineTo(1000, 200)
  ctx.moveTo(0, 300)
  ctx.lineTo(1000, 300)
  ctx.moveTo(0, 400)
  ctx.lineTo(1000, 400)
  ctx.moveTo(0, 500)
  ctx.lineTo(1000, 500)
  ctx.moveTo(0, 600)
  ctx.lineTo(1000, 600)
  ctx.moveTo(0, 700)
  ctx.lineTo(1000, 700)
  ctx.moveTo(0, 800)
  ctx.lineTo(1000, 800)
  ctx.stroke()
  ctx.closePath()
  //#endregion

  // 头发
  //#region 
  ctx.beginPath()
  ctx.moveTo(400, 30)
  ctx.quadraticCurveTo(410, 0, 450, 10)
  ctx.globalCompositeOperation = 'source-over'
  ctx.fillStyle = '#C0C0C0'
  ctx.fill()

  ctx.beginPath()
  ctx.moveTo(370, 90);
  ctx.quadraticCurveTo(475, 130, 500, 60)
  ctx.globalCompositeOperation = 'source-over'
  ctx.fillStyle = '#C0C0C0'
  ctx.fill()

  ctx.beginPath()
  ctx.moveTo(370, 91)
  ctx.lineTo(400, 28)
  ctx.lineTo(449, 10)
  ctx.lineTo(500, 25)
  ctx.lineTo(500, 61)
  ctx.globalCompositeOperation = 'source-over'
  ctx.fillStyle = '#C0C0C0'
  ctx.fill()
  ctx.closePath()

  ctx.beginPath()
  ctx.moveTo(600, 30)
  ctx.quadraticCurveTo(590, 0, 550, 10)
  ctx.globalCompositeOperation = 'source-over'
  ctx.fillStyle = '#C0C0C0'
  ctx.fill()

  ctx.beginPath()
  ctx.moveTo(630, 90);
  ctx.quadraticCurveTo(525, 130, 500, 60)
  ctx.globalCompositeOperation = 'source-over'
  ctx.fillStyle = '#C0C0C0'
  ctx.fill()

  ctx.beginPath()
  ctx.moveTo(630, 91)
  ctx.lineTo(600, 28)
  ctx.lineTo(551, 10)
  ctx.lineTo(500, 25)
  ctx.lineTo(500, 61)
  ctx.globalCompositeOperation = 'source-over'
  ctx.fillStyle = '#C0C0C0'
  ctx.fill()
  ctx.closePath()
  //#endregion

  // 头
  //#region 
  ctx.beginPath()
  ctx.lineJoin = "round"
  ctx.lineWidth = 20
  ctx.moveTo(410, 50)
  ctx.lineTo(410, 200)
  ctx.arcTo(410, 220, 420, 220, 30)
  ctx.lineTo(470, 220) // 脖子
  ctx.lineTo(470, 275) // 脖子
  ctx.lineTo(530, 275) // 脖子
  ctx.lineTo(530, 220) // 脖子
  ctx.lineTo(580, 220)
  ctx.arcTo(590, 220, 590, 200, 30)
  ctx.lineTo(590, 50)
  ctx.globalCompositeOperation = 'destination-over'
  ctx.fillStyle = "#FEDB61"
  ctx.fill()
  ctx.closePath()
  //#endregion

  // 眼睛 + 嘴巴
  //#region 
  ctx.beginPath()
  ctx.arc(460, 125, 15, 0, (Math.PI / 180) * 360, true)
  ctx.arc(540, 125, 15, 0, (Math.PI / 180) * 360, true)
  ctx.globalCompositeOperation = 'source-over'
  ctx.fillStyle = "#000000"
  ctx.fill()
  ctx.closePath()

  ctx.beginPath()
  ctx.arc(458, 125, 8, 0, (Math.PI / 180) * 360, true)
  ctx.arc(538, 125, 8, 0, (Math.PI / 180) * 360, true)
  ctx.globalCompositeOperation = 'source-over'
  ctx.fillStyle = "#FFFFFF"
  ctx.fill()
  ctx.closePath()

  ctx.beginPath()
  ctx.moveTo(500, 165)
  ctx.lineTo(480, 190)
  ctx.lineTo(520, 190)
  ctx.globalCompositeOperation = 'source-over'
  ctx.fillStyle = "#C91D32"
  ctx.fill()
  ctx.closePath()
  //#endregion

  // 身体
  //#region 
  ctx.beginPath()
  ctx.lineWidth = 2
  ctx.moveTo(310, 315)
  ctx.lineTo(360, 274)
  ctx.arcTo(375, 270, 385, 274, 30)
  ctx.lineTo(600, 274)
  ctx.arcTo(610, 260, 630, 274, 15)
  ctx.lineTo(685, 330)
  ctx.lineTo(650, 360)
  ctx.lineTo(620, 330)
  ctx.lineTo(620, 520)
  ctx.lineTo(620, 520)
  ctx.lineTo(375, 520)
  ctx.lineTo(375, 325)
  ctx.lineTo(340, 350)
  ctx.fillStyle = "#000000"
  ctx.fill()
  ctx.closePath()
  //#endregion

  // 背带
  //#region 
  ctx.beginPath()
  ctx.lineWidth = 2
  ctx.moveTo(415, 274)
  ctx.lineTo(440, 274)
  ctx.lineTo(440, 520)
  ctx.lineTo(560, 520)
  ctx.lineTo(560, 274)
  ctx.lineTo(585, 274)
  ctx.lineTo(585, 520)
  ctx.lineTo(620, 520)
  ctx.lineTo(620, 800)
  ctx.lineTo(535, 800)
  ctx.lineTo(535, 560)
  ctx.lineTo(465, 560)
  ctx.lineTo(465, 800)
  ctx.lineTo(375, 800)
  ctx.lineTo(375, 520)
  ctx.lineTo(415, 520)
  ctx.globalCompositeOperation = 'source-over'
  ctx.fillStyle = "#808080"
  ctx.fill()
  ctx.closePath()
  //#endregion

  // 篮球
  //#region 
  ctx.beginPath()
  ctx.lineWidth = 2
  ctx.arc(575, 680, 60, 0, (Math.PI) / 180 * 360)
  ctx.globalCompositeOperation = 'source-over'
  ctx.fillStyle = "#EE822F"
  ctx.fill()
  ctx.closePath()

  ctx.beginPath()
  ctx.lineWidth = 3
  ctx.arc(575, 680, 60, 0, (Math.PI) / 180 * 360)
  ctx.moveTo(600, 626)
  ctx.lineTo(550, 735)
  ctx.moveTo(550, 625)
  ctx.quadraticCurveTo(570, 700, 631, 660)
  ctx.moveTo(519, 700)
  ctx.quadraticCurveTo(580, 670, 609, 730)
  ctx.strokeStyle = "#000000"
  ctx.stroke()
  ctx.closePath()
  //#endregion

  // 胳膊
  //#region 
  ctx.beginPath()
  ctx.lineWidth = 2
  ctx.moveTo(310, 430)
  ctx.lineTo(310, 315)
  ctx.lineTo(345, 315)
  ctx.lineTo(345, 430)
  ctx.lineTo(315, 450)
  ctx.quadraticCurveTo(305, 445, 310, 430)
  ctx.globalCompositeOperation = 'destination-over'
  ctx.fillStyle = "#FEDB61"
  ctx.fill()
  ctx.closePath()

  ctx.beginPath()
  ctx.lineWidth = 2
  ctx.moveTo(315, 450)
  ctx.lineTo(390, 510)
  ctx.lineTo(410, 485)
  ctx.lineTo(345, 430)
  ctx.globalCompositeOperation = 'source-over'
  ctx.fillStyle = "#FEDB61"
  ctx.fill()
  ctx.closePath()

  ctx.beginPath()
  ctx.lineWidth = 2
  ctx.arc(405, 502, 25, 0, (Math.PI) / 180 * 360)
  ctx.globalCompositeOperation = 'source-over'
  ctx.fillStyle = "#75BD42"
  ctx.fill()
  ctx.closePath()

  ctx.beginPath()
  ctx.lineWidth = 2
  ctx.moveTo(683, 330)
  ctx.lineTo(730, 450)
  ctx.lineTo(690, 450)
  ctx.lineTo(650, 350)
  ctx.globalCompositeOperation = 'destination-over'
  ctx.fillStyle = "#FEDB61"
  ctx.fill()
  ctx.closePath()

  ctx.beginPath()
  ctx.lineWidth = 2
  ctx.moveTo(730, 450)
  ctx.quadraticCurveTo(750, 500, 700, 490)
  ctx.lineTo(590, 440)
  ctx.lineTo(605, 410)
  ctx.lineTo(690, 445)
  ctx.globalCompositeOperation = 'source-over'
  ctx.fillStyle = "#FEDB61"
  ctx.fill()
  ctx.closePath()

  ctx.beginPath()
  ctx.lineWidth = 2
  ctx.arc(588, 420, 25, 0, (Math.PI) / 180 * 360)
  ctx.globalCompositeOperation = 'source-over'
  ctx.fillStyle = "#75BD42"
  ctx.fill()
  ctx.closePath()
  //#endregion

  // 腿
  //#region 
  ctx.beginPath()
  ctx.lineWidth = 2
  ctx.moveTo(400, 800)
  ctx.lineTo(440, 800)
  ctx.lineTo(440, 820)
  ctx.lineTo(400, 820)
  ctx.moveTo(560, 800)
  ctx.lineTo(600, 800)
  ctx.lineTo(600, 820)
  ctx.lineTo(560, 820)
  ctx.fillStyle = "#FEDB61"
  ctx.fill()
  ctx.closePath()
  //#endregion

  // 鞋子
  //#region 
  ctx.beginPath()
  ctx.lineWidth = 2
  ctx.moveTo(400, 820)
  ctx.lineTo(440, 820)
  ctx.arcTo(460, 820, 460, 840, 20)
  ctx.lineTo(460, 875)
  ctx.lineTo(380, 875)
  ctx.lineTo(380, 840)
  ctx.arcTo(380, 820, 400, 820, 20)
  ctx.moveTo(560, 820)
  ctx.lineTo(600, 820)
  ctx.arcTo(620, 820, 620, 840, 20)
  ctx.lineTo(620, 875)
  ctx.lineTo(540, 875)
  ctx.lineTo(540, 840)
  ctx.arcTo(540, 820, 560, 820, 20)
  ctx.fillStyle = "#75BD42"
  ctx.fill()
  ctx.closePath()
  //#endregion
}
</script>

<style lang="scss" scoped>
.canvasClass {
  margin-top: 30px;
  background-color: #E8EAED;
  box-shadow: 0 0 10px #C0C0C0;
  border-radius: 5px;
}
</style>

猛扇赵四那半好嘴
关注
  • 9
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
HTML 5 笔记
qq_39234639的博客
12-24 492
HTML 5 学习笔记
2023Web前端开发八股文&面试题（万字系列）——这篇就够了！
热门推荐
upgrade_bro的博客
09-01 1万+
2023Web前端开发面试题&八股文万字长篇，涵盖html、css、javascript、浏览器相关、网络传输、算法、Vue、React、打包工具……
有关前端的一些问题（一）
qq_36493878的博客
12-28 804
2021学习前端的一些问题（一）
前端基础学习笔记
sober30的博客
07-27 4119
css3有哪些新特性：圆角盒子阴影文本阴影不透明度 ：opacity 、rgba渐变背景 ：线性渐变、径向渐变背景属性：backgroud-size、background-clip（拓展）结构选择器：first-child()…伪元素新写法 :before ::before(css3) 为了和:hover之类的伪类选择器作区分弹性盒子：flex转换：2D转换、3D转换（拓展）过渡：一般搭配hover使用animation动画（拓展）媒体查询。
h5c3大结局
2301_78178746的博客
08-24 355
肉类蔬菜水果熟食花生豆
python学习笔记
qwerdftgu的博客
08-21 1367
# 这是注释 Ctrl + / # 这也是注释 ... 注释内容 ... import tkinter.messagebox import types # 添加动态方法的库 ''' print('你好，python') a='hp' b='sb' print(a) print("周旭飞是一个：") print(a) print(1+1) print(57%2) print(2 and 1) ''' ''' 算术运算符：**指数，//地板除 逻辑运算符：and or not非 type()查看变...
HTML5笔记
qq_46048008的博客
08-13 575
超文本标记语言，描述网页的一种语言，不是编程语言，而是一种标记语言，H5是它最新版本HTML类似房子的水泥墙CSS类似房子的白粉墙壁与瓷地砖JS类似房子的门，提供功能...
赵大超的学习周志（八）
Mr_SuperZhao的博客
12-20 550
赵大超的学习周志（七） 本周是Java学习的第七周，主要是对前端知识的学习，其中学习的内容包括H5和CSS，具体学习了H5中的各种标签元素，CSS中的使用方式，最后是对网页的设计和布局的学习，综合运用所学可以实现简单的静态网页。总体来说学习的内容比较基础，想要熟练掌握还需要多应用实践，尤其是在对各部分布局上需要考虑怎么做才比较合理得当。现将本周学习的基本内容总结如下： HTML HTML 指的是超文本标记语言: Hyper Text Markup Language HTML：是超文本标记语言，他不是编程语言
使用canvas绘制的动态实时时钟.html
06-30
使用canvas绘制的实时时钟
绘制与凸包算法实现：使用Vue.js和HTML5 Canvas
07-17
这是一个Vue.js组件，提供了一个交互式的画布，允许用户通过点击画布来绘制点，并计算这些点的凸包和缓冲区。组件包括一个按钮来控制绘制的开始和暂停。使用HTML5 Canvas进行图形的绘制，并通过Andrew's monotone ...
微信小程序使用canvas绘制进度条.zip
01-11
3. **绘制进度条**：在canvas上绘制进度条，首先需要定义一个矩形区域作为进度条的容器，然后根据进度值动态改变填充矩形的宽度。例如，可以设定一个初始宽度为0的矩形，当有进度更新时，增加矩形的宽度，从而在视觉...
Node.js-canvas-nest.js一个基于html5canvas绘制的网页背景效果
08-10
Nest.js可能会使用Web Workers进行后台计算，或者使用GPU加速（通过WebGL）来减轻主线程的压力。 6. **Nest.js框架**：尽管“canvas-nest.js”本身与Node.js的Nest框架没有直接关系，但如果你的项目是基于Nest.js...
Android 中View.onDraw(Canvas canvas)的使用方法
08-29
在上面的代码中，我们使用 Canvas 对象的 drawRect() 方法来绘制一个矩形区域。这个矩形区域的左上角坐标为 (10, 10)，右下角坐标为 (100, 100)。我们还使用了一个 Paint 对象来指定矩形区域的颜色和样式。 此外，...
网上商品订单转手系统bootpf
weixin_43213064的博客
08-18 502
【代码】springboot网上商品订单转手系统bootpf
【js】各类前端输入校验方法
最新发布
galaxyJING的博客
08-21 156
【代码】【js】各类前端输入校验方法。
Nuxt3【内置的工具函数】2024最新版
朝阳39的博客
08-20 879
用于在Vue应用程序或API路由中进行HTTP请求，详见。
使用canvas绘制一个球
04-03
以下是使用canvas绘制一个球的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Canvas Ball</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="myCanvas" width="200" height="200"></canvas> <script> const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); const x = canvas.width / 2; const y = canvas.height / 2; const radius = 50; ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI * 2); ctx.fillStyle = "red"; ctx.fill(); ctx.closePath(); </script> </body> </html> ``` 解释： 1. 首先，在HTML中创建一个canvas元素，并设置其id、宽度和高度。 2. 然后，在JavaScript中获取canvas元素和绘图上下文。 3. 定义球的中心坐标和半径。 4. 使用beginPath()方法开始绘制路径。 5. 使用arc()方法绘制圆形路径。 6. 设置球的颜色为红色，并用fill()方法填充球。 7. 最后，使用closePath()方法关闭路径。 这样就可以在canvas上绘制一个红色的球了。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

猛扇赵四那半好嘴

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值