canvas 实现简单的画板功能添加手机端效果 1.01
在上次的基础上，加了一些代码，手机端可操作
访问网址：https://chandler712.github.io/Item/
<!-- 简单版画板 -->
<!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 canvas=document.getElementById("mycanvas");
var ctx=canvas.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").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").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").mouseout(function(e){
ctx.closePath();//当鼠标移出画布区域时,创建从当前点回到起始点的路径
bool=false;
console.log("mouseout",bool);
});
$("#mycanvas").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=canvas.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"; }); //手机端功能实现
//鼠标点击设置画布起点
canvas.ontouchstart=function(a){
bool=true;
var x=a.touches[0].clientX;
var y=a.touches[0].clientY;
console.log(x,y);
ctx.beginPath();//起始/重置一条路径
ctx.moveTo(x,y);
var pic=ctx.getImageData(0,0,canvasW,canvasH);//获取当前画布的图像
img.push(pic);//将当前图像存入数组
};
canvas.ontouchmove=function(a){
console.log("move",bool);
var x=a.touches[0].clientX;
var y=a.touches[0].clientY;
if(bool){ //通过bool值控制画线的连续性,如果bool=true,画线
console.log("if(bool2)",bool); ctx.lineTo(x-left,y);//添加一个新点，在画布中创建从该点到最后指定点的线条
ctx.stroke();//画线 }
}; </script>
canvas 实现简单的画板功能添加手机端效果 1.01的更多相关文章
- canvas 实现简单的画板功能 1.0
canvas 实现自由画线,变换颜色.画笔大小,撤销上一步等简单功能 <!DOCTYPE html> <html lang="en"> <head&g ...
- kbmmw 的远程桌面功能2-android手机端
前面讲了PC 端的远程操作,今天讲一下如何用手机控制远程桌面(真的能操作的很爽吗?), 要使手机可以远程控制,首先在在kbmmwconfig.inc 文件里面加入FMX 支持 {$DEFINE KBM ...
- 利用canvas写一个验证码小功能
刚刚开始接触canvas,写个验证码小功能练练手,实现效果图如下: 主要代码如下: html <!DOCTYPE html> <html lang="en"> ...
- java 工作流项目源码 SSM 框架 Activiti-master springmvc 有手机端功能
即时通讯:支持好友,群组,发图片.文件,消息声音提醒,离线消息,保留聊天记录 (即时聊天功能支持手机端,详情下面有截图) 工作流模块---------------------------------- ...
- JGUI源码：Accordion鼠标中键滚动和手机端滑动实现(2)
本文是抽屉组件在PC端滚动鼠标中键.手机端滑动时,滚动数据列表实现方法,没有使用iscroll等第三方插件,支持火狐,谷歌,IE8+等浏览器. 演示在:www.jgui.com Github地址:ht ...
- 手机端扫描证件识别SDK
手机端扫描证件识别SDK 一.手机端扫描证件识别SDK应用背景 这些年,随着移动互联网的的发展,越来越多的公司都推出了自己的移动APP,这些APP多数都涉及到个人身份证信息的输入认证(即实名认证),如 ...
- 【分享】用Canvas实现画板功能
前言 PC端测试:QQ浏览器全屏绘画完成.缩小时内容会被清空,切换背景颜色内容会被重置,其他暂无发现: 手机端测试:微信内置浏览器不通过:Safari 浏览器使用画笔时没固定页面会有抖动效果,使用橡皮 ...
- iOS实现白板、画板功能，有趣的涂鸦工具，已封装，简单快捷使用
一.效果图: 二.选择颜色: 分[固定颜色模式]和[自由取模式]. 三.操作栏功能: 1.撤销:撤销上一步操作,可一直往上进行,直到全部清空. 2.清空:直接清除所有绘画. 3.橡皮擦:去除不要的绘 ...
- ASP.NET MVC 学习4、Controller中添加SearchIndex页面，实现简单的查询功能
参考:http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/examining-the-edit-method ...
随机推荐
- JAVA垃圾回收分代处理思想
原文链接:http://www.cnblogs.com/laoyangHJ/archive/2011/08/17/JVM.html JVM分代垃圾回收策略的基础概念 JVM分代垃圾回收策略的基础概念 ...
- [转]VRRP协议详解
原文地址:VRRP协议详解 文中涉及缩略语 缩略语 英文全名 中文解释 VRRP Virtual Router Redundancy Protocol 虚拟路由器冗余协议 NQA Network Qu ...
- ubuntu中用update-alternatives进行软件多版本设置、切换，以python配置为例
以Python2.7和Python3.5设置为例: 在系统中添加Python2.7.Python3.5的选项,默认为Python3.5 sudo update-alternatives --insta ...
- 【WPF】 OxyPlot图表控件学习
最近在学习OxyPlot图表控件,一些基本的学习心得,在这里记录一下,方便以后进行查找. 一.引用 OxyPlot控件可以直接在VS的 " Nuget " 里面下载 选择: ...
- vue 打开新窗口进行打印
父文件 let { href } = this.$router.resolve({ path: ' 自己配置本地路由,不需要动态路由 ', query: 个人建议传一整个对象 }) window.op ...
- 性能测试工具JMeter 基础（一）—— 安装、配置环境变量
JMeter下载 下载地址:https://jmeter.apache.org/download_jmeter.cgi 下载完成后解压后可直接使用,不用进行安装 环境变量配置 新增变量名:JMETER ...
- GO安装golang.org/x/net扩展库
在学习golang过程中,有部分示例代码使用到了非标准库golang.org/x/net/html相关的库函数,但是标准代码库中没有该库,因此需要自己安装: 我这里使用git下载源码进行的安装. 为了 ...
- msf宏钓鱼
kali下载python脚本,生成rtf文件: 下载脚本:git clone https://github.com/bhdresh/CVE-2017-8759.git 生成rtf文件: python ...
- Hearthbuddy跳过ConfigurationWindow窗口
Hearthbuddy版本为按照上一条博客修复后的版本. 打开Hearthbuddy后会弹出一个这样的窗口: 这个界面没有什么用,而且也没有人对此进行任何修改. 由于之前折腾版早就已经把这个界面跳过了 ...
- go新建一个工程
使用go mod 可以在任何地方新建工程 工程目录 main.go //引用子包必须格式"工程目录/子包" go.mod 子包 编译工程: go build