<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<style>
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
box-sizing: border-box;
font-size: 0;
color: #000;
}
div {
box-sizing: border-box;
height: 20px;
color: #000;
font-size: 16px;
}
#app {
height: 100%;
width: 100%;
}
span {
display: block;
height: 20px;
line-height: 20px;
width: 60px;
}
.topbox {
height: 120px;
width: 100%;
border: 2px solid rgb(177, 176, 176);
border-left: 0;
border-right: 0;
display: flex;
align-items: center;
padding: 0 4%;
}
.bigbox {
width: 100%;
height: calc(100% - 120px);
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
#can {
width: 800px;
height: 800px;
border: 1px solid #acabab;
}
.posi {
position: absolute;
z-index: 10000;
color: #000;
font-size: 16px;
width: 140px;
height: 40px;
box-shadow: 5px 5px 5px rgb(187, 184, 184);
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
background-color: #fff;
opacity: 0;
}
.flexbox {
display: flex;
justify-content: flex-start;
align-items: center;
margin-right: 20px;
}
.flexStart {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgb(167, 166, 166);
height: 24px;
width: 24px;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<div class="topbox">
<div class="flexbox">
<div>字体大小：</div>
<select v-model="size">
<option v-for="(l,i) in options" :value="l.value" :key="i">{{l.value}} </option>
</select>
</div>
<div class="flexbox">
<div>是否填充完全：</div>
<div>
是<input type="radio" name="fill" @click="getFill()" value="true">
否<input type="radio" name="fill" @click="getFill()" checked value="false">
</div>
</div>
<div class="flexbox">
<button @click="back">回退上一步</button>
</div>
<div class="flexbox">
<button @click="clearDarw">清空画布</button>
</div>
<div class="flexbox">
<button @click="zbx">生成坐标系</button>
</div>
<!-- H5新增颜色选择器 -->
<div class="flexbox">
<div>颜色：</div>
<input type="color" v-model="color" />
</div>
<!-- <div class="flexbox">
<div class="flexStart" @click="isRounds">
<svg t="1667804730617" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="2525" width="16" height="16">
<path
d="M512 960c-247.039484 0-448-200.960516-448-448S264.960516 64 512 64 960 264.960516 960 512 759.039484 960 512 960zM512 128c-211.744443 0-384 172.255557-384 384s172.255557 384 384 384 384-172.255557 384-384S723.744443 128 512 128z"
p-id="2526" :fill="isRound?'#bf8282':'#515151'"></path>
</svg>
</div>
</div> -->
</div>
<div class="bigbox">
<canvas id="can" width="800px" height="800px"></canvas>
<div class="posi"></div>
</div>
</div>
<script type="module">
new Vue({
el: '#app',
data: function () {
return {
imgData: [],
isRound: false,
color: '#000',
flag: false,
isFill: false,
options: [
{
value: 1
}, {
value: 2
}, {
value: 3
}, {
value: 4
}, {
value: 5
},
],
size: 1,
}
},
watch: {
color: function () {
console.log(this.color);
},
isRound: function () {
if (this.isRound) {
this.roundEvent()
} else {
this.mrEvent()
}
}
},
methods: {
// 绘制圆形
isRounds() {
this.isRound = !this.isRound
if (this.isRound) {
document.getElementsByClassName("flexStart")[0].style.backgroundColor = "bisque"
// 获取can的dom
let can = document.getElementById("can")
// 创建一个2Dcanvas画布
let context = can.getContext('2d')
} else {
document.getElementsByClassName("flexStart")[0].style.backgroundColor = "#fff"
}
},
// 回退
back() {
if (this.imgData.length) {
// 获取can的dom
let can = document.getElementById("can")
// 创建一个2Dcanvas画布
let context = can.getContext('2d')
context.putImageData(this.imgData[this.imgData.length - 1], 0, 0);
this.imgData.splice(this.imgData.length - 1, 1)
}
},
// 是否绘制
getFill() {
let fill = document.getElementsByName("fill")
for (let i = 0; i < fill.length; i++) {
if (fill[i].checked) {
if (i === 0) {
this.isFill = true
} else if (i === 1) {
this.isFill = false
}
}
}
},
// 清空画布
clearDarw() {
// 获取can的dom
let can = document.getElementById("can")
// 创建一个2Dcanvas画布
let context = can.getContext('2d')
context.clearRect(0, 0, can.width, can.height);
},
// 生成坐标系
zbx() {
this.nowData()
// 获取can的dom
let can = document.getElementById("can")
// 创建一个2Dcanvas画布
let context = can.getContext('2d')
let screenHeight = document.body.offsetWidth
// 获取画布的高
let canHeight = can.offsetHeight
// 获取画布的宽
let canWidth = can.offsetWidth
// 坐标轴间隙
let gridSize = 20
// 平行于x轴绘制的线数
let xLineTotal = Math.floor(canHeight / gridSize) * 1
// 线条改为当前选择的颜色
context.strokeStyle = this.color
for (let i = 1; i < xLineTotal; i++) {
// 获取每条线所在的纵坐标
let linePosition = i * gridSize
// 每条线的起始位置
context.moveTo(0, linePosition)
// 每条线的终点位置
context.lineTo(canWidth, linePosition)
context.lineWidth = 1
// context.lineColor = "#000"
context.stroke()
}
let yLineTotal = Math.floor(canWidth / gridSize) * 1
for (let i = 1; i < yLineTotal; i++) {
// 获取每条线所在的纵坐标
let linePosition = i * gridSize
// 每条线的起始位置
context.moveTo(linePosition, 0)
// 每条线的终点位置
context.lineTo(linePosition, canHeight)
context.lineWidth = 1
// context.lineColor = "#000"
context.stroke()
}
},
// 当前数据
nowData() {
// 获取can的dom
let can = document.getElementById("can")
// 创建一个2Dcanvas画布
let context = can.getContext('2d')
// 记录当前数据
let width = context.canvas.width;
let height = context.canvas.height;
this.imgData.push(context.getImageData(0, 0, width, height));
},
// 画图函数
draw(x, y) {
// 获取can的dom
let can = document.getElementById("can")
// 创建一个2Dcanvas画布
let context = can.getContext('2d')
// 打印绘画当前的横纵坐标
// console.log(x, y);
// 开始画图
context.beginPath();
// 画圆 坐标在当前鼠标位置，半径为1px的圆
context.arc(x, y, this.size, 0 * Math.PI / 180, 360 * Math.PI / 180)
// 线条改为当前选择的颜色
context.strokeStyle = this.color
// 结束绘画
if (this.isFill) {
// 填充绘画
// 填充色更改为当前选中的颜色
context.fillStyle = this.color
context.fill();
} else {
// 不填充绘画
context.stroke();
}
},
rounddown: (e, that) => {
let can = document.getElementById("can")
let context = can.getContext('2d')
// 开始画图
context.beginPath();
// 画圆 坐标在当前鼠标位置，半径为1px的圆
context.arc(e.offsetX, e.offsetY, 120, 0 * Math.PI / 180, 360 * Math.PI / 180)
// 线条改为当前选择的颜色
context.strokeStyle = that.color
context.stroke();
},
mrdown: (e, that) => {
that.flag = true
},
mrup: (e, that) => {
that.flag = false
},
mrmove: (e, that) => {
let can = document.getElementById("can")
// 创建一个2Dcanvas画布
let context = can.getContext('2d')
// 鼠标右下角坐标dom
let po = document.getElementsByClassName("posi")[0]
// po.style.opacity = "1"
po.style.top = e.clientY - 70 + "px"
po.style.left = e.clientX + 20 + "px"
po.innerHTML = `(${e.offsetX}px,${e.offsetY}px)`
if (that.flag) {
that.nowData()
that.draw(e.offsetX, e.offsetY)
}
},
// 默认给鼠标事件
mrEvent() {
let can = document.getElementById("can")
let context = can.getContext('2d')
// 移除事件
can.removeEventListener("mousedown", (e) => {
let that = this
this.rounddown(e, that)
})
// 鼠标任意键按下事件
can.addEventListener("mousedown", (e) => {
let that = this
this.mrdown(e, that)
})
// 鼠标任意键松开事件
can.addEventListener("mouseup", (e) => {
let that = this
this.mrup(e, that)
})
// 鼠标滑动事件
can.addEventListener("mousemove", (e) => {
let that = this
this.mrmove(e, that)
})
},
// 点击画圆时的鼠标事件
roundEvent() {
let can = document.getElementById("can")
let context = can.getContext('2d')
// 移除鼠标任意键松开事件
can.removeEventListener("mouseup", (e) => {
let that = this
this.mrup(e, that)
})
// 移除鼠标滑动事件
can.removeEventListener("mousemove", (e) => {
let that = this
this.mrmove(e, that)
})
can.removeEventListener("mousedown", (e) => {
let that = this
this.mrdown(e, that)
})
can.addEventListener("mousedown", (e) => {
let that = this
this.rounddown(e, that)
})
}
},
mounted() {
let can = document.getElementById("can")
// 创建一个2Dcanvas画布
let context = can.getContext('2d')
let po = document.getElementsByClassName("posi")[0]
// 禁用鼠标右键
document.oncontextmenu = function () {
return false;
}
// 鼠标移入画布
can.addEventListener('mouseover', (e) => {
po.style.opacity = 1
})
// 鼠标移入画布
can.addEventListener('mouseout', (e) => {
po.style.opacity = 0
})
this.mrEvent()
}
})
</script>
</body>
</html>
01-07
816
816
07-16
568
568
03-12
3万+
3万+
10-14
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
