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 ...
随机推荐
- Linux操作系统基本应用（完结）
时间:2015-4-10 12:40Linux第一天 Linux基本命令 Linux各文件夹的作用 bin 二进制可执行命令 dev 设备特殊文件 etc 系统管理和配置 ...
- C++字符串【string】和【char []】操作全攻略
异想之旅:本人博客完全手敲,绝对非搬运,全网不可能有重复:本人无团队,仅为技术爱好者进行分享,所有内容不牵扯广告.本人所有文章发布平台为CSDN.博客园.简书和开源中国,后期可能会有个人博客,除此之外 ...
- Go进阶--httptest
目录 基本使用 扩展使用 接口context使用 模拟调用 测试覆盖率 参考 单元测试的原则,就是你所测试的函数方法,不要受到所依赖环境的影响,比如网络访问等,因为有时候我们运行单元测试的时候,并没有 ...
- IDEA中mybatis generator使用
1.在对应服务的pom.xml文件中添加依赖 <build> <plugins> <plugin> <groupId>org.mybatis.gener ...
- 新来的前端小姐姐问：Vue路由history模式刷新页面出现404问题
摘要:vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 本文分享自华为云社区<学习Vue Rou ...
- java基础之ThreadLocal
早在JDK 1.2的版本中就提供java.lang.ThreadLocal,ThreadLocal为解决多线程程序的并发问题提供了一种新的思路.使用这个工具类可以很简洁地编写出优美的多线程程序.Thr ...
- 稚晖君-最小linux服务器运行 nginx + netcore
华为天才少年, B站科技大神,稚晖君(自称野生钢铁侠),多少科技爱好者拜服在他的全方位技术栈 今天我们就去入手一个他的量产产品 号称最小linux电脑 的"夸克" 到手之后,我们马 ...
- Python习题集（六）
每天一习题,提升Python不是问题!!有更简洁的写法请评论告知我! https://www.cnblogs.com/poloyy/category/1676599.html 题目 ''' 问题1.对 ...
- python库--tensorflow--数学函数
官方API(需FQ) 中文API 方法 返回值类型 参数 说明 算数运算符 .add() Tensor x, y, name=N 加法(若x,y都为tensor, 数据类型需一致, 以下所有x,y都如 ...
- 383 day10缓冲流、转换流、序列化流
day10[缓冲流.转换流.序列化流] 主要内容 缓冲流 转换流 序列化流 打印流 教学目标 [ ] 能够使用字节缓冲流读取数据到程序 [ ] 能够使用字节缓冲流写出数据到文件 [ ] 能够明确字符缓 ...