dps_canvas
Version:
Html canvas üzerinde şekiller oluşturmanızı sağlar
74 lines (60 loc) • 2.61 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"/><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><script defer="defer" src="dps.js"></script></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>