<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>
使用canvas绘制一个会唱、跳、rap...
最新推荐文章于 2024-08-21 14:09:37 发布