canvas 实现简单的画板功能 1.0

canvas 实现自由画线，变换颜色、画笔大小，撤销上一步等简单功能

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>画板</title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <style>

        body,div,canvas,h5,input,ul,li,p,button{

            margin: 0px;

            padding: 0px;

            position: relative;

        }

        #mycanvas{

           margin: 5px;

       }

        #content{

            margin: 5px auto;

            width: 700px;

            height: 510px;

            border: 1px solid gray;

        }

        #canvas_selector{

            position: absolute;

            margin-left: 505px;

            margin-top: -512px;

            height: 500px;

            width: 190px;

            border:1px solid black;

        }

        .title{

            text-align: center;

            margin-bottom: 10px;

        }

        ul li{

            list-style-type: none;

            margin: 10px 30px 10px 20px;

            display: block;

            float: left;

            width: 40px;

            height: 20px;

            background:greenyellow;

            cursor: pointer;

            border: 1px solid gray;

        }

        #canvas_color,#canvas_brush,#canvas_control,#canvasImage{

            margin:50px 0 50px 0;

        }

        #canvas_brush{

            height: 80px;

            margin:10px 10px 0px 20px;

            background:greenyellow;

            text-align:center;

        }

        #lineT{

            width: 150px;

            height: 30px;

            background:bisque;

        }

        #canvas_control{

            margin:10px 10px 20px 30px;

            text-align:center;

        }

        #canvasImage{

            text-align: center;

        }

        #imgDiv{

            margin: 0 auto;

        }

        #line{

            width: 40px;

            height: 20px;

            cursor: pointer;

        }

    </style>

</head>

<body>

    <div id="content">

        <canvas id="mycanvas" width="500" height="500" style="border: 1px solid red;"></canvas>

        <div id="canvas_selector">

            <div id="canvas_color">

                <h5 class="title">颜色<input type="color" name="color" id="changeColor" /></h5>

            </div>

            <div id="canvas_brush">

                <h5 class="title">画笔大小</h5>

                <input type="range" id="lineT" min="1" max="100" value="2">

            </div>

            <div id="canvas_control">

                <h5 class="title">操作</h5>

                <span><button style="background:greenyellow" id="prev">上一步</button></span>

                <span><button style="background:greenyellow" id="cloth">橡皮擦</button></span>

                <span><button style="background:#ffc200" id="clear">清除</button></span>

            </div>

            <div id="canvasImage">

                <button id="createImg">生成图像</button>

            </div>

        </div>

    </div>

    <div id="imgDiv"></div>

</body>

</html>

<script>

    var c=$("#mycanvas")[0];

    var canvas= $("#mycanvas");

    console.log(c);

    var ctx=c.getContext("2d");//创建画布对象

    var bool=false;

    var left=$("#mycanvas").offset().left;//获取画布的left值

    console.log("left",left);

    var top=$("#mycanvas").offset().top;//获取画布的top值

    console.log("top",top);

    var canvasW=$("#mycanvas").width();//获取画布的宽度

    console.log("canvasW",canvasW);

    var canvasH=$("#mycanvas").height();//获取画布的高度

    console.log("canvasH",canvasH);

    var img = []; //用于存放画布图片截图的数组

    var imgDiv=document.getElementById("imgDiv");

    var content=document.getElementById("content")

    var color="#000";

    ctx.lineCap="round";// 设置线条的结束端点样式

    ctx.lineJion="round";//设置两条线相交时，所创建的拐角类型  

    //鼠标点击设置画布起点

    /* $("#mycanvas") */canvas.mousedown(function(e){

        bool=true;

        console.log("mousedown",bool);

        ctx.beginPath();//起始/重置一条路径

        ctx.moveTo(e.clientX-left,e.clientY-top); //把路径移动到画布中的指定点，不创建线条

        var pic=ctx.getImageData(0,0,canvasW,canvasH);//获取当前画布的图像

        img.push(pic);//将当前图像存入数组

    });

    //当bool=ture时鼠标移动画线

    /* $("#mycanvas") */canvas.mousemove(function(e){

       console.log("mousemove",bool);

        if(bool){ //通过bool值控制画线的连续性,如果bool=true,画线

            console.log("if(bool)",bool);

            ctx.lineTo(e.clientX-left,e.clientY-10);//添加一个新点，在画布中创建从该点到最后指定点的线条

            ctx.stroke();//画线

        }

    });

    //鼠标移出画布或者抬起时，退出当前画线，并新建画线，实现画线断续

    /* $("#mycanvas") */canvas.mouseout(function(e){

        ctx.closePath();//当鼠标移出画布区域时,创建从当前点回到起始点的路径

        bool=false;

        console.log("mouseout",bool);

    });

    /* $("#mycanvas") */canvas.mouseup(function(e){

        ctx.closePath();//当鼠标抬起时,创建从当前点回到起始点的路径

        bool=false;

        console.log("mouseup",bool);

    }); 

    //清除画布

    $("#clear").click(function(){

        //alert("Are you sure clear the canvas?");

        ctx.clearRect(0,0,canvasW, canvasH);//创建矩形清空

    });

    //擦除画布

    $("#cloth").click(function(){

        ctx.strokeStyle="#fff";//利用画线为白色实现橡皮擦功能

    });

    //上一步

    $("#prev").click(function(){

        if(img.length>=0){

            console.log("img.length",img.length);

            var newImgLength=img.length;

            console.log("newImgLength",newImgLength);

            ctx.putImageData(img.pop(),0,0);

        }

    });

    //改变颜色

    $("#changeColor").change(function(){

        ctx.strokeStyle=this.value;//改变颜色

    });

    //改变画笔大小

    $("#lineT").change(function(){

        ctx.lineWidth=this.value;

    });

    //生成图片

    $("#createImg").click(function(){

        var url=c.toDataURL('image/png');

        var newImg=new Image();//创建一个Image对象

        newImg.src=url;

        imgDiv.appendChild(newImg);

        imgDiv.style.width="500px";

        imgDiv.style.height="500px";

        imgDiv.style.background="#ccc";

    });

</script>

canvas 实现简单的画板功能 1.0的更多相关文章

canvas 实现简单的画板功能添加手机端效果 1.01
在上次的基础上,加了一些代码,手机端可操作访问网址:https://chandler712.github.io/Item/  <!DOCTYPE htm ...
iOS实现白板、画板功能，有趣的涂鸦工具，已封装，简单快捷使用
一.效果图: 二.选择颜色: 分[固定颜色模式]和[自由取模式]. 三.操作栏功能: 1.撤销:撤销上一步操作,可一直往上进行,直到全部清空. 2.清空:直接清除所有绘画. 3.橡皮擦:去除不要的绘 ...
在iOS中实现一个简单的画板App
在这个随笔中,我们要为iPhone实现一个简单的画板App. 首先需要指出的是,这个demo中使用QuarzCore进行绘画,而不是OpenGL.这两个都可以实现类似的功能,区别是OpenGL更快,但 ...
Python3使用PyQt5制作简单的画板/手写板
0.目录 1.前言 2.简单的画板1.0 在定点和移动中的鼠标所在处画一条线 3.简单的画板2.0 在定点和移动中的鼠标所在处画一条线并将画过的线都保留在窗体上 4.简单的画板3.0 将按住鼠标后移 ...
Unity UGUI 实现简单拖拽功能
说到拖拽,那必然离不开坐标,UGUI 的坐标有点不一样,它有两种坐标,一种是屏幕坐标,还有一种就是 UI 在Canvas内的坐标(暂时叫做ugui坐标),这两个坐标是不一样的,所以拖拽就需要转换. 因 ...
一步一步学Silverlight 2系列（5）：实现简单的拖放功能
述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
ASP.NET MVC 学习4、Controller中添加SearchIndex页面，实现简单的查询功能
参考:http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/examining-the-edit-method ...
Web---创建Servlet的3种方式、简单的用户注册功能
说明: 创建Servlet的方式,在上篇博客中,已经用了方式1(实现Servlet接口),接下来本节讲的是另外2种方式. 上篇博客地址:http://blog.csdn.net/qq_26525215 ...

随机推荐

使用dom4j工具：设置输出格式compactFormat和PrettyPrint（六）
package dom4j_write; import java.io.File; import java.io.FileOutputStream; import java.io.OutputStre ...
创建File类及 this.getClass().getResource()方法用到的文件路径的问题
1 package test; 2 3 import java.io.*; 4 import java.util.Scanner; 5 6 public class TestResource { 7 ...
跟我一起用unity做小地图！
lol的小地图转载爬虫请自重,未问先转没排面不爱多做铺垫,小地图对于一些游戏来说多重要大家都懂,不然你也不会来看我这篇文章的,对不对? 话不多说,开搞! 一.主体功能一般来说,游戏里的迷你地图都 ...
Go依赖包管理--间接依赖
目录 1.indirect含义 1.2 直接依赖未启用 Go module 1.2 直接依赖 go.mod 文件不完整 2.总结 1.indirect含义在使用 Go module 过程中,随着引入 ...
备忘：Linux内核编程的几个注意事项
虚拟地址转物理地址要用__pa 内核程序创建的一段地址连续的共享内存,通过内存映射可以让用户态进程存取.之前在RHEL/CentOS的x86_64架构上工作正常.后来在aarch64架构的银河麒麟(L ...
MySQL-表迁移工具的选型-xtrabackup的使用
1.1. 场景有的时候test人员可能需要在测试库上比较新的数据,这时候只能是从生产库上面去那了.如果是小表还好实用mysqldump/mysqlpump就可以轻松的解决.但是,如果遇到了大表这将是 ...
vsftpd 参数说明
2021-07-28 该文章为转载文章,非原创参数作用# 是否允许匿名访问 [ 12行 ]anonymous_enable=[YES|NO]# 是否允许本地用户访问( /etc/passwd中的用户 ...
Python之requests模块-hook
requests提供了hook机制,让我们能够在请求得到响应之后去做一些自定义的操作,比如打印某些信息.修改响应内容等.具体用法见下面的例子: import requests # 钩子函数1 def ...
第07课：GDB 常用命令详解（下）
本课的核心内容: disassemble 命令 set args 和 show args 命令 tbreak 命令 watch 命令 display 命令 disassemble 命令当进行一些高级 ...
php-fpm进程数控制
一.名词解释 CGI是Common Gateway Interface(通用网管协议),用于让交互程序和Web服务器通信的协议.负责处理URL的请求,启动一个进程,将客户端发送的数据作为输入,有Web ...

canvas 实现简单的画板功能 1.0

canvas 实现简单的画板功能 1.0的更多相关文章

随机推荐

热门专题