移动端html5手写板,Vue利用canvas实现移动端手写板的方法
清除
保存
Canvas画板
var draw;
var preHandler = function(e){e.preventDefault();}
class Draw {
constructor(el) {
this.el = el
this.canvas = document.getElementById(this.el)
this.cxt = this.canvas.getContext('2d')
this.stage_info = canvas.getBoundingClientRect()
this.path = {
beginX: 0,
beginY: 0,
endX: 0,
endY: 0
}
}
init(btn) {
var that = this;
this.canvas.addEventListener('touchstart', function(event) {
document.addEventListener('touchstart', preHandler, false);
that.drawBegin(event)
})
this.canvas.addEventListener('touchend', function(event) {
document.addEventListener('touchend', preHandler, false);
that.drawEnd()
})
this.clear(btn)
}
drawBegin(e) {
var that = this;
window.getSelection() ? window.getSelection().removeAllRanges() : document.selection.empty()
this.cxt.strokeStyle = "#000"
this.cxt.beginPath()
this.cxt.moveTo(
e.changedTouches[0].clientX - this.stage_info.left,
e.changedTouches[0].clientY - this.stage_info.top
)
this.path.beginX = e.changedTouches[0].clientX - this.stage_info.left
this.path.beginY = e.changedTouches[0].clientY - this.stage_info.top
canvas.addEventListener("touchmove",function(){
that.drawing(event)
})
}
drawing(e) {
this.cxt.lineTo(
e.changedTouches[0].clientX - this.stage_info.left,
e.changedTouches[0].clientY - this.stage_info.top
)
this.path.endX = e.changedTouches[0].clientX - this.stage_info.left
this.path.endY = e.changedTouches[0].clientY - this.stage_info.top
this.cxt.stroke()
}
drawEnd() {
document.removeEventListener('touchstart', preHandler, false);
document.removeEventListener('touchend', preHandler, false);
document.removeEventListener('touchmove', preHandler, false);
//canvas.ontouchmove = canvas.ontouchend = null
}
clear(btn) {
this.cxt.clearRect(0, 0, 300, 600)
}
save(){
return canvas.toDataURL("image/png")
}
}
export default {
data () {
return {
msg: 'Welcome to Your Vue.js App',
val:true,
url:""
}
},
mounted() {
draw=new Draw('canvas');
draw.init();
},
methods:{
clear:function(){
draw.clear();
},
save:function(){
var data=draw.save();
this.url = data;
console.log(data)
},
mutate(word) {
this.$emit("input", word);
},
}
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
#canvas {
background: pink;
cursor: default;
}
#keyword-box {
margin: 10px 0;
}
移动端html5手写板,Vue利用canvas实现移动端手写板的方法相关推荐
- html5 canvas 椭圆,html5中怎么利用Canvas绘制椭圆
html5中怎么利用Canvas绘制椭圆 发布时间:2021-07-08 16:32:10 来源:亿速云 阅读:58 作者:Leah html5中怎么利用Canvas绘制椭圆,针对这个问题,这篇文章详 ...
- Vue利用Canvas实现逐帧播放图片不闪烁(Vue解决逐帧播放图片闪烁问题)
Vue利用Canvas实现逐帧播放图片不闪烁 前言 Vue代码实现 实现效果 前言 Vue采用<el-image :src="src"></el-image> ...
- 在HTML5中如何利用Canvas处理并存储图片
HTML5中增加的Canvas元素,配合JS灵活的语法,处理起图片变得异常简单,不需要在客户端用C/C 写一大堆代码,对于熟悉JS的程序员来说,只需要考虑处理图片的逻辑了. canvas中如果想要处理 ...
- h5 vue利用canvas实现手机签名并且可旋转功能
功能描述: 利用canvas实现手机签名转化成图片( 包含清除,由于手机全屏展示 所以还添加了图片翻转功能)生成base64地址 上传后台 功能展示: 代码展示: html: <template ...
- vue中用canvas实现移动端手写板、电子签名功能
html部分: js部分: css部分:
- vue中用canvas画移动端电量显示 实现充电动画
写一个电量组件 battery.vue <template><div><canvas ref="mycanvas" :width="cWid ...
- html 环形进度条,详解利用canvas实现环形进度条的方法
前提:有时候在项目中会有用到进度条的情况,使用css3也可以实现,但是对于性能不好的设备,或者网络不好的情况下,卡顿现象非常明显,避免出现不流畅的尴尬情况,所以记录一下,使用canvas来实现的方法. ...
- php 可以做pc客户端吗,vue.js能做pc端吗
vue.js能做pc端,因为Vue是一套构建用户界面的渐进式框架,不管是用在PC端还是用在移动端,只要提供对应的API及数据相应就可以:但是PC端单页面对于搜索引擎可能不太友好,无法让搜索引擎把整个网 ...
- 移动端html5手写板,Vue+canvas实现移动端手写板步骤详解
这次给大家带来Vue+canvas实现移动端手写板步骤详解,Vue+canvas实现移动端手写板的注意事项有哪些,下面就是实战案例,一起来看一下. 清除 保存 Canvas画板 var draw; v ...
最新文章
- 10没有基于策略的qos_基于强化学习的用户移动场景下空中基站3D位置高效部署...
- django升级问题
- SAP License:关于集团管控模式的几点思考
- LSTM神经网络输入输出究竟是怎样的?
- 【路径规划】基于matlab遗传算法多车辆路径规划【含Matlab源码 704期】
- linux中下载安装包
- 金蝶K3系统单据对应ICTemplate表单ID信息
- html tbody边框,tbody边框呈现问题
- osu计算机专业排名,OSU计算机专业有奖学金啦~
- 爬虫Scrapy框架学习(五)-东莞阳光热线问政平台爬取案例
- Python爬虫 抓取大数据岗位招聘信息(51job为例)
- sketchup 计算机配置,【答疑】草图大师电脑配置要求?草图大师2016电脑配置要求? - 视频教程线上学...
- 关于720度全景图你要知道这些内容
- C盘空间清理 - C:\Windows\SoftwareDistribution\Download 下的大文件是否可删除
- 算法入门004-数据结构
- 经理、总监、VP、CTO,如何通过CEO思考问题的方式,来提升自己
- android 项目降级_如何将您的Android手机降级到以前的版本
- 隐马尔科夫模型c#语言算法实现,HMM学习最佳范例四:隐马尔科夫模型
- #### protoc ####
- Matlab-标准遗传算法
热门文章
- 实参与形参不兼容怎么解决_实木地板缝隙大怎么办,快来看看人家老外是怎么做的吧...
- 常用的SEO工具一览
- 除了文件上传还有哪些方式可以写一句话木马?
- 【JavaLearn】#(19)反射、Class类、使用反射创建对象-操作属性-执行方法、泛型与反射、反射案例
- 唉~这种SOHO的生活啊。
- python 学习汇总29:各种推导式( tcy)
- Codevs P1655 物流运输
- 某同学对老徐十个经典面谈问题的回答,非常值得借鉴~
- (转)MP4文件两种格式AVC1和H264的区别及利用FFMPEG demux为h264码流事项
- C语言——花括号{}的作用域限定