canvas畫板！隨意畫！！

希望你天天開心

在這里插入圖片描述

代碼：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>繪畫板</title><style>#canvas {border: 1px solid black;border-radius: 5px;}.menu {display: flex;}.button {margin: 5px;}</style>
</head><body><div class="menu"><div class="button">畫板</div><div class="button" id="clear">重置</div><div class="button" id="save">保存</div></div><div class="window"><div class="top"><div class="button"></div><div class="button"></div><div class="button"></div></div></div><canvas id="canvas" width="500" height="500"></canvas><script>let painting = false; // 記錄繪畫let startPoint = { x: undefined, y: undefined }; // 記錄起點的位置const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");// 鼠標點擊canvas.onmousedown = (e) => {let x = e.offsetX;let y = e.offsetY;startPoint = { x: x, y: y };painting = true;}// 鼠標移動canvas.onmousemove = (e) => {let x = e.offsetX;let y = e.offsetY;let newPoint = { x: x, y: y };if (painting) {drawLine(startPoint.x, startPoint.y, newPoint.x, newPoint.y);startPoint = newPoint;}}// 鼠標離開canvas.onmouseup = () => {painting = false;}// 繪制方法function drawLine(xStart, yStart, xEnd, yEnd) {ctx.beginPath();ctx.lineWidth = 3;ctx.moveTo(xStart, yStart);ctx.lineTo(xEnd, yEnd);ctx.stroke();ctx.closePath();}clear.onclick = () => {ctx.fillStyle = "#fff";ctx.clearRect(0, 0, canvas.width, canvas.height);// ctx.fillRect(0, 0, canvas.width, canvas.height); // 同上面效果一致}save.onclick = () => {const url = canvas.toDataURL("image/jpg");const a = document.createElement("a");a.href = url;a.download = "畫板";a.target = "_blank";a.click();}</script>
</body></html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/80533.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/80533.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/80533.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！