dps_canvas
Version:
Html canvas üzerinde şekiller oluşturmanızı sağlar
107 lines (86 loc) • 2.73 kB
HTML
<html lang="tr">
<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>
<style>
body {
margin: 30px;
user-select: none;
}
.btn-group {
margin: 10px 0;
}
.btn-group button {
border: none;
outline: none;
padding: 10px 15px;
background-color: #e17055;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.d-none {
display: none;
}
.my {
margin: 10px 0;
}
</style>
</head>
<body>
<div class="btn-group btn-group1">
<button class="square change-status">Square</button>
<button class="circle change-status">Circle</button>
<button class="undo">Undo</button>
<button class="move">Move</button>
<button class="get-coordinate">Get Coordinate</button>
</div>
<div class="my canvas-status"></div>
<canvas id="canvas"></canvas>
<div class="detail-box"></div>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d", { willReadFrequently: true });
const getCoordinate = document.querySelector(".get-coordinate");
const moveItem = document.querySelector(".move");
const changeStatus = document.querySelectorAll(".change-status");
const circleBtn = document.querySelector(".circle");
const squarebtn = document.querySelector(".square")
const settings = {
width: 700,
height: 500,
};
canvas.addEventListener("dps:drag", (e) => {
// console.log(e.detail);
});
canvas.addEventListener("dps:click", (e) => {
console.log(e.detail);
});
window.onload = () => {
const base = new dps.Base({ ctx, ...settings });
base.fillCanvas = "#3867d6";
base.inputStyle = {
color: "darkred",
backgroundColor: "#222"
}
getCoordinate.onclick = () => {
console.log(base.coordinate);
};
moveItem.onclick = () => {
base.process = "moving";
};
circleBtn.addEventListener("click", () => {
base.status = "circle";
});
squarebtn.addEventListener("click", () => {
base.status = "square";
});
changeStatus.forEach((item) => (item.onclick = () => (base.process = "creating")));
//dps.Base.drawAll();
};
</script>
</body>
</html>