<!DOCTYPE html>
<html>
<head>
<title>阿赛画板asai.cc</title>
<style>
#asaicanvas {
border: 5px solid black;
}
</style>
</head>
<body>
<div
style="
background-image: url('https://www.estun.com/skin/images/logo.gif');
background-color: yellow;
"
>
<button onclick="drawType()">切换</button>
<button onclick="saveCanvas()">下载</button>
<button onclick="clearCanvas()">清空</button>
<canvas id="asaicanvas" width="800" height="600"></canvas>
</div>
<script>
const canvas = document.getElementById("asaicanvas");
const ctx = canvas.getContext("2d");
const image = new Image();
image.src = "test.png";
image.onload = function () {
ctx.drawImage(image, 0, 0);
};
canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stopDrawing);
canvas.addEventListener("mouseout", stopDrawing);
let isDrawing = false;
let lastX = 0;
let lastY = 0;
let lineColor = "black";
let lineWidth = 20;
let lineStyle = "solid";
let fillStyle = "transparent";
let isErasing = false;
function drawType() {
isErasing = !isErasing;
}
function startDrawing(event) {
isDrawing = true;
[lastX, lastY] = [event.clientX, event.clientY];
}
function draw(event) {
if (!isDrawing) return;
ctx.beginPath();
if (isErasing) {
ctx.globalCompositeOperation = "destination-out";
}
ctx.lineCap = "round";
ctx.moveTo(lastX, lastY);
ctx.lineTo(event.clientX, event.clientY);
ctx.strokeStyle = lineColor;
ctx.lineWidth = lineWidth;
ctx.lineStyle = lineStyle;
ctx.stroke();
ctx.fillStyle = fillStyle;
ctx.fill();
[lastX, lastY] = [event.clientX, event.clientY];
}
function stopDrawing() {
isDrawing = false;
}
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function saveCanvas() {
const link = document.createElement("a");
const base64Canvas = canvas.toDataURL("image/png");
console.log(666.909, base64Canvas);
link.href = base64Canvas;
link.download = "base64Canvas.png";
link.click();
}
</script>
</body>
</html>