canvas画布 可修改画笔颜色、粗细、返回到上一步、清除画布、保存图片

最新推荐文章于 2023-10-19 13:28:39 发布
最新推荐文章于 2023-10-19 13:28:39 发布
阅读量2.3k 收藏 5
点赞数 3
分类专栏： 前端 文章标签： canvas js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Moxi099/article/details/115574051
版权

直接上代码，canvas真有趣

参考https://blog.csdn.net/zemprogram/article/details/89077403

<!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>画图板</title>
</head>

<body>
    <div style="width:506px;margin:50px auto;">
        <input type="color" id="color">
        <select name="" id="line-width">
            <option value="1">--请选择线条粗细（像素）--</option>
            <option value="2">2px</option>
            <option value="5">5px</option>
            <option value="8">8px</option>
            <option value="12">12px</option>
            <option value="15">15px</option>
        </select>
        <input type="button" value="清除画布" id="btnClear">
        <input type="button" value="返回上一步" id="return">
        <input type="button" value="保存" id="save">
        <canvas id="canvas" width="500" height="500" style="display: block;border: 3px black solid;margin-top: 10px;"></canvas>
    </div>

    <script type="text/javascript">
        //获取画布元素
        let canvas = document.getElementById("canvas");
        let context = canvas.getContext("2d");

        //将所有像素点信息存储在数组中，后续返回上一步时可用到
        let restore = [context.getImageData(0, 0, 500, 500)];

        //获取画笔颜色
        let color = document.getElementById("color");
        //获取画笔宽度
        let lineWidth = document.getElementById("line-width");
        let btn = document.getElementById("btnClear");
        let returnStep = document.getElementById("return");
        let save = document.getElementById("save");
        isDraw = false;
        //绘图
        //鼠标摁下时
        canvas.onmousedown = function(event) {
                isDraw = true;

                context.lineWidth = lineWidth.value;
                context.strokeStyle = color.value;

                context.beginPath();
                context.moveTo(event.offsetX, event.offsetY);
            }
            //鼠标开始移动时绘图
        canvas.onmousemove = function(event) {
                if (isDraw) {
                    context.lineTo(event.offsetX, event.offsetY);
                    context.stroke();
                }
            }
            //鼠标松开时停止绘图
        canvas.onmouseup = function() {
                isDraw = false;
                //将此时绘制的信息存储到restore数组中
                restore[restore.length] = context.getImageData(0, 0, canvas.width, canvas.height);
            }
            //鼠标移出canvas后停止绘图
        canvas.onmouseout = function() {
                isDraw = false;
            }
            //点击按钮清除画布
        btn.onclick = function() {
                context.clearRect(0, 0, canvas.width, canvas.height);
                restore[restore.length] = context.getImageData(0, 0, canvas.width, canvas.height);
            }
            //返回上一步
        returnStep.onclick = function() {
                if (restore.length > 1) {
                    context.putImageData(restore[restore.length - 2], 0, 0);
                    restore.length--;
                }
            }
            //保存图片
        save.onclick = function() {
            let name = prompt("请输入要保存的图片名称", "canvas绘制图片");
            if (name === "") {
                alert("图片名字不能为空")
            } else {
                let href = canvas.toDataURL();
                let a = document.createElement('a');
                a.download = name;
                a.href = href;
                a.dispatchEvent(new MouseEvent('click'));
            }
        }
    </script>
</body>

</html>

 

php的绯闻女友
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
java 画笔粗细_javaScript canvas实现(画笔大小 颜色 橡皮的实例)
weixin_39611666的博客
02-21 432
shaperectanglecirclelinevar shap = 99; //0 is circle; 1 is rectanglevar orignalX, orignalY;//the coordinate of mouse downvar lastX, lastY;//the coordinate of last mouse positionvar isMouseDown = false...
自定义view—Canvas实现手写板和涂鸦功能
bobo8945510的博客
11-21 3354
学习导航第一节：http://blog.csdn.net/bobo8945510/article/details/53197727 —自定义View—自定义属性及引用第二节：http://blog.csdn.net/bobo8945510/article/details/53203233 自定义view02—图形绘制第四节：http://blog.csdn.net/bobo8945510/artic
C#画笔Pen用法实例
09-03
主要介绍了C#画笔Pen用法,实例分析了画笔Pen绘制图形的相关技巧,需要的朋友可以参考下
HTML5 使用canvas实现画板功能(画笔颜色切换、粗细调整、清除图像)
yuhaowen的博客
03-30 6493
标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。 在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。 HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成. 标签只是图形容器，您必须使用脚本来绘制图形。 实现画笔颜色切换 画笔粗细调整 清除图像 绘制矩形 绘制圆形 创建一个画布（Canvas） <canvas id="canvas" width="900" height=500" style="border: 2px #5.
SWT Canvas画图，实现CTRL + Z 回退前一步操作
CaptainGan的专栏
11-21 3965
本Demo是在SWT Canvas中画图，实现CTRL+ Z回退到前一个操作的记录的功能。 实现原理：使用java中的List实现一个对象栈的输入输出操作（为什么不用数组来实现，比list实现麻烦的多，因为数组要求是固定长度，不容易改变。List的大小可以根据需要变改变），在List中保存每一步操作的图片截图，没CTRL + Z 一次，就将List中的最后一个图片对象取出，显示到Canvas中，
微信小程序canvas实现画图可以恢复上一步操作以及从头演示（有效果图）
换日线的博客
11-12 1633
效果图 .wxml <canvas disable-scroll="{{true}}" style="width:100%;height:400px;background-color: #fff;" type="2d" id="canvas" bindtouchstart="canstart" bindtouchmove="canvasmove" ></canvas> <button bindtap="save">保存画布</button> <bu
html5 画布 可改变颜色 画笔粗细
10-10
可以直接运行，一个简单的画布，可以改变画笔颜色、画笔粗细，也可以生成画。就是一个.html文件，css跟js都写在里面
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
10-18
在这个实例中，我们将探讨如何使用JavaScript和Canvas API来实现画笔大小、颜色选择以及橡皮擦功能。 首先，Canvas API通过`<canvas>`元素在HTML中创建一个画布。在本例中，我们有一个宽度为800像素、高度为500像素...
HTML5 Canvas画布源码
05-16
7. **保存功能**：Canvas内容无法直接保存到本地，但可以通过`toDataURL()`方法将其转换为Data URL（通常是PNG格式），然后可以通过`a`标签的下载属性让用户下载或通过后端接口保存到服务器。 8. **鼠标模拟手写...
基于HTML5的canvas技术实现自制画板，具有切换画笔颜色、撤回、清除.zip
最新发布
02-14
此外，项目的实现可能还包括对用户交互的优化，如添加橡皮擦功能、调整画笔粗细、改变透明度等。同时，为了保证在不同设备上的兼容性，还需要考虑触屏设备的触摸事件以及不同浏览器对HTML5的支持程度。 总之，这个...
安卓自定义view—Canvas实现手写板和涂鸦功能(可以返回上一步手写的内容)
10-14
博客地址https://blog.csdn.net/hongfei568718926/article/details/109072663
Canvas撤回操作及前进功能（Javascript）
04-16
/** * canvas操作历史回退及前进功能 * * 调用示例，执行某个操作之后，调用保存历史，这里的参数都是自定义的需要保存的历史数据 * self.selectCanvas.getContext("2d").saveHistory(points, copy_segments, copy_rounds, copy_controlLine, * copy_selectedSegments, copy_selectedPoints); * 回撤及前进功能代码示例 * $(window).keydown(function (event) { if (event.ctrlKey == true && event.keyCode == 90) {//Ctrl+ Z let history_data = self.selectCanvas.getContext("2d").undo(); // 获取回退一步的历史数据 if (history_data != null) { ... } } if (event.ctrlKey == true && event.keyCode == 89) {//Ctrl+ Y let history_data = self.selectCanvas.getContext("2d").redo(); //获取前进一步的历史数据 if (history_data != null) { ... } } } **/
使用canvas写的时间轴插件，可以实现拖动、点击返回时间点、增加录像块、放大缩小等功能
04-25
分享一个使用canvas写的时间轴插件 这是一个使用canvas写的时间轴插件，可以实现拖动、点击返回时间点、增加录像块、放大缩小等功能 在我工作项目中用在了视频回放时间轴部分 项目开发刚好用到，找了很久终于合适
安卓手绘图片处理画板相关-可以任意对本地图片进行添加画笔标示有保存删除调整画笔粗细等功能.zip
07-29
在安卓平台上，手绘图片处理画板是一种常见的应用，它允许用户通过触控方式在图片上添加各种元素，如画笔标识、文字注释等，同时提供保存、删除以及画笔参数调整等功能。这个压缩包文件包含了一个可能的实现此类功能...
原生JS结合canvas写的一套画板,能修改画笔粗细,能修改画笔颜色,能清空画板等一系列功能
qq_52619560的博客
07-28 1241
2.用到的JS的canvas知识点之外,还用到了鼠标事件的监听.根据鼠标事件,监听点击起始位置,以及过程中鼠标移动的位置,到最后鼠标松开的位置.再根据鼠标的移动轨迹进行画线.3.源码中封装了两个函数,line()函数是画布的一系列画线方法,change()函数是监听的鼠标移动轨迹,轨迹结合画线方法,完成画板的绘画功能.在鼠标轨迹的监听事件中,鼠标松开的事件里.要将之前的鼠标事件值为空,这样鼠标松开之后,才不会妨碍后续鼠标事件的执行.//封装函数功能监听鼠标的移动轨迹。//封装函数功能画线。...
html5 canvas修改颜色,html5 canvas 笔记二（添加样式和颜色）
weixin_36212459的博客
06-09 932
色彩 ColorsfillStyle = color设置图形的填充颜色。strokeStyle = color设置图形轮廓的颜色。透明度 TransparencyglobalAlpha = transparency value1 // globalAlpha 示例2 ctx.fillStyle = '#FD0';3 ctx.globalAlpha = 0.2;45 // rgba() 示例6 ct...
canvas画布绘制线条样式：粗细，圆角，拐角等
10-19 1079
值的一提的是，如果不传数组的话，那么就会报错；如果数组只有一个元素的话，那么就是实线和空白依次按这个元素大小来绘制；如果多个元素的时候就是交替循环来间隔。线帽样式对于越宽的线条效果越明显，所以上面线宽给了一个10。同时可以看到线帽给的不一样，宽度其实也是有点不同的。那么后面线描边的时候也会把之前的绘制一下，那么三条先最终的宽度就都是10了。线帽样式由lineCap来定义，它有三个值。虚线是由细小的实线和空白组成，绘制虚线使用。（左边多了一半，右边也多了一半）。，矩形的大小也变了，目前的宽度是。
canvas lineWidth为1时线条粗细和颜色
热门推荐
寒岁青松的专栏
10-13 1万+
今天在使用html5的canvas时碰到了一个问题
前端学习笔记----canvas实现画板及定制画笔(画笔错位，撤回，粗细，颜色)
weixin_34138056的博客
12-13 3370
本期的小需求: 在页面中实现一个能进行绘画的画板 能实现画笔颜色、粗细、撤回等功能 开发环境 Vue + elementUI 采坑记录 画笔与鼠标错位 （恶心很久）（样式设置长宽canvas导致） 画笔切换颜色 粗细 图片跨域等等..... 动手 1.生成或选中canvas对象 // html <canvas id="box"></canvas> // vu...
用canvas实现一个画板，可以删除，返回上一步，进入下一步，给画笔设置颜色和大小
04-21
好的，我理解了您的要求。下面是使用Canvas实现的画板的示例代码，您可以使用这个代码来实现您需要的画板功能： ``` <!DOCTYPE html> <html> <head> <title>Canvas Paint Board</title> </head> <body> <canvas id="canvas" width="600" height="400" style="border: 1px solid black;"></canvas> <label>Color:</label> <input type="color" id="colorPicker"> <label>Brush Size:</label> <input type="range" id="brushSize" value="10" min="1" max="50"> <button id="undoBtn">Undo</button> <button id="redoBtn">Redo</button> <button id="clearBtn">Clear</button> <script> // 获取画布和画笔 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // 画笔颜色和粗细 var brushColor = document.getElementById("colorPicker").value; var brushSize = document.getElementById("brushSize").value; // 保存历史记录的栈 var undoStack = []; var redoStack = []; // 绘制初始画面 drawCanvas(); // 监听画布点击事件 canvas.addEventListener("mousedown", startDrawing); // 监听画笔颜色和粗细的变化 document.getElementById("colorPicker").addEventListener("input", changeColor); document.getElementById("brushSize").addEventListener("input", changeBrushSize); // 监听撤销、重做和清空按钮的点击事件 document.getElementById("undoBtn").addEventListener("click", undoDrawing); document.getElementById("redoBtn").addEventListener("click", redoDrawing); document.getElementById("clearBtn").addEventListener("click", clearCanvas); // 鼠标按下，准备开始绘制 function startDrawing(event) { // 添加绘制历史记录 undoStack.push(canvas.toDataURL()); // 获取鼠标在画布上的位置 var x = event.clientX - canvas.offsetLeft; var y = event.clientY - canvas.offsetTop; canvas.addEventListener("mousemove", drawLine); canvas.addEventListener("mouseup", stopDrawing); // 绘制初始点 ctx.beginPath(); ctx.moveTo(x, y); } // 绘制线条 function drawLine(event) { // 获取鼠标在画布上的位置 var x = event.clientX - canvas.offsetLeft; var y = event.clientY - canvas.offsetTop; // 设置画笔的颜色和粗细 ctx.strokeStyle = brushColor; ctx.lineWidth = brushSize; // 绘制线条 ctx.lineTo(x, y); ctx.stroke(); } // 鼠标抬起，结束绘制 function stopDrawing() { canvas.removeEventListener("mousemove", drawLine); canvas.removeEventListener("mouseup", stopDrawing); } // 改变画笔颜色 function changeColor(event) { brushColor = event.target.value; } // 改变画笔粗细 function changeBrushSize(event) { brushSize = event.target.value; } // 撤销绘制 function undoDrawing() { if (undoStack.length > 0) { // 添加重做历史记录 redoStack.push(canvas.toDataURL()); var lastDraw = undoStack.pop(); var img = new Image(); img.onload = function () { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height); }; img.src = lastDraw; } } // 重做绘制 function redoDrawing() { if (redoStack.length > 0) { // 添加撤销历史记录 undoStack.push(canvas.toDataURL()); var lastDraw = redoStack.pop(); var img = new Image(); img.onload = function () { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height); }; img.src = lastDraw; } } // 清空画布 function clearCanvas() { // 添加撤销历史记录 undoStack.push(canvas.toDataURL()); ctx.clearRect(0, 0, canvas.width, canvas.height); } // 绘制初始画面 function drawCanvas() { ctx.fillStyle = "white"; ctx.fillRect(0, 0, canvas.width, canvas.height); } </script> </body> </html> ``` 这段代码使用了Canvas API来绘制图形，同时实现了一些常见的画板功能，包括： - 绘制线条 - 改变画笔颜色和粗细 - 撤销、重做和清空画布 您可以在上面的示例代码基础上进行修改，添加自己需要的功能。同时，注意保护好用户的隐私和安全，不要泄露用户的任何信息。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值