H5网页涂鸦canvas

最近做了个播放页面，标题和一个iframe;需要对这个iframe可以进行网页涂鸦。
网页涂鸦肯定是canvas了。网上找了个差不多的，实验下来问题很多，干脆自己一步步修改，学习。

效果：

本项目没有引入其他的任何工具库，复制代码可以直接运行，下面贴出代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>小小英语-阅读</title><meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="format-detection" content="telephone=no"><meta name="description" content="数千册优质分级阅读绘本"><style>*{padding:0;margin:0;}li{list-style-type:none;}html,body{height:100%;}.content-page{min-width:1500px;min-height: 100%;background:#f6f6f6;}#page{position:relative;width:1200px;margin:0 auto;border-top:1px solid rgba(0,0,0,0)}h3{position: relative;margin:40px 0;color:#ff8e5d; font-size:30px;text-align:center;}.back{position:absolute;left:0;top:50%;transform:translate(0,-50%);font-family:PingFang-SC-Regular;font-size:20px;padding-left:20px;background:url('../assets/images/icon_back-red.png') no-repeat;background-size:20px 20px;}#content-iframe{width:100%;background: #ccc;min-height: 800px;border:none;}#canvas{position:absolute;left:0;top:0;z-index:100;cursor:default;top:120px;left:50%;transform:translate(-50%,0);display: none;/*canvas刚进来是隐藏的，需要选颜色激活*/}.right-bar{width:100px;position: absolute;right:-120px;top:120px;color:#000;z-index:1;}.word{font-size:24px;font-family:FredokaOne-Regular;color:rgba(255,142,93,1);text-align:center;}.right-bar>span{display: block;width:90px;height:40px;color:#fff;font-size:16px;padding:0;line-height: 40px;border:none;background: #FF8E5D;margin:18px auto;text-align: center;cursor: pointer;}.btn-active{background:#ED723D !important}#color{padding-left:8px;margin-top:10px;}#color>i{position:relative;display:inline-block;width:34px;height:34px;border-radius: 50%;margin-right:8px;margin-bottom:5px;border:none;cursor: pointer;z-index:50;}.color-active{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display: block;border: 1px solid #FF8E5D;border-radius: 50%;width:40px;height:40px;z-index:40;display: none;}.i1{background:#DF4BFF;}.i2{background:#9CCB68;}.i3{background:#3DC1FF;}.i4{background:#FFD338;}.i5{background:#FF6262;}.i6{background: #000000;}</style></head><body><div class="content-page"><div id="page"><h3>标题<p class="back" @click="goBack()">返回上一级</p></h3><iframe id="content-iframe" :src="iframeUrl"></iframe><div class="right-bar"><div class="word">color</div><div id="color"><i class="i1"><span class="color-active"></span></i><i class="i2"><span class="color-active"></span></i><i class="i3"><span class="color-active"></span></i><i class="i4"><span class="color-active"></span></i><i class="i5"><span class="color-active"></span></i><i class="i6"><span class="color-active"></span></i></div><span id="eraser">橡皮擦</span><span id="revocation">撤销</span><span id="clear">清除</span><span id="hide" class="btn-active">关闭</span></div></div><canvas id="canvas" width="740" height="420">您的<u>浏览器</u>不支持 canvas 标签</canvas></div><script type="text/javascript">var paint={load:function(){   this.x=[];//记录鼠标移动是的X坐标this.y=[];//记录鼠标移动是的Y坐标this.clickDrag=[];this.lock=false;//鼠标移动前，判断鼠标是否按下this.isEraser=false;this.storageColor="#f00";this.eraserRadius=15;//擦除半径值this.color=["#DF4BFF","#9CCB68","#3DC1FF","#FFD338","#FF6262","#000000"];//画笔颜色this.$=function(id){return typeof id=="string"?document.getElementById(id):id;};this.canvas=this.$("canvas");this.canvas.width=this.$('content-iframe').offsetWidth;//设定canvas的宽度this.canvas.height=this.$('content-iframe').offsetHeight;//设定canvas的高度if (!this.canvas.getContext) {alert("您的浏览器不支持 canvas 标签");return;}this.cxt=this.canvas.getContext('2d');this.cxt.lineJoin = "round";//context.lineJoin - 指定两条线段的连接方式this.cxt.lineWidth = 5;//线条的宽度this.iptClear=this.$("clear");this.revocation=this.$("revocation");this.hide = this.$('hide');this.eraser = this.$('eraser');this.colorSpan = this.$('color').getElementsByTagName('span');//颜色的外框的span集合this.imgArr = [];//保存每个状态,撤销的时候用到this.touch =("createTouch" in document);//判定是否为手持设备this.StartEvent = this.touch ? "touchstart" : "mousedown";//支持触摸式使用相应的事件替代this.MoveEvent = this.touch ? "touchmove" : "mousemove";this.EndEvent = this.touch ? "touchend" : "mouseup";this.bind();},bind:function(){var t=this;this.hide.onclick = function(){t.canvas.style.display = 'none';t.eraser.className = "";t.hide.className  = 'btn-active't.hideColorSpan();}/*清除画布*/this.iptClear.οnclick=function(){t.cxt.clearRect(0, 0, t.canvas.width, t.canvas.height-1);};/*鼠标按下事件，记录鼠标位置，并绘制，解锁lock，打开mousemove事件*/this.canvas['on'+t.StartEvent]=function(e){   // debugger;t.imgArr.push(t.cxt.getImageData(0, 0,t.canvas.width,t.canvas.height));var touch=t.touch ? e.touches[0] : e;var box = t.canvas.getBoundingClientRect();var _x = (touch.clientX - box.left) * t.canvas.width / box.widthvar _y = (touch.clientY - box.top) * t.canvas.height / box.height            if(t.isEraser){t.resetEraser(_x,_y,touch);}else{t.movePoint(_x,_y);//记录鼠标位置t.drawPoint();//绘制路线}t.lock=true;};/*鼠标移动事件*/this.canvas['on'+t.MoveEvent]=function(e){// console.log(t.touch);var touch=t.touch ? e.touches[0] : e;//var touch = e;if(t.lock){var touch=t.touch ? e.touches[0] : e;var box = t.canvas.getBoundingClientRect();var _x = (touch.clientX - box.left) * t.canvas.width / box.widthvar _y = (touch.clientY - box.top) * t.canvas.height / box.height   if(t.isEraser){t.resetEraser(_x,_y,touch);}else{t.movePoint(_x,_y,true);//记录鼠标位置t.drawPoint();//绘制路线}}};this.canvas['on'+t.EndEvent]=function(e){/*重置数据*/t.lock=false;t.x=[];t.y=[];t.clickDrag=[];clearInterval(t.Timer);t.Timer=null;};this.revocation.οnclick=function(){if(t.imgArr.length>0){t.cxt.putImageData(t.imgArr[t.imgArr.length-1], 0, 0);t.imgArr.pop();}};this.changeColor();/*橡皮擦*/this.$("eraser").οnclick=function(e){if(t.hide.className ===''){t.hideColorSpan();//这里是t.isEraser=true;t.eraser.className = 'btn-active';}};},movePoint:function(x,y,dragging){   // debugger;/*将鼠标坐标添加到各自对应的数组里*/this.x.push(x);this.y.push(y);this.clickDrag.push(y);},drawPoint:function(x,y,radius){for(var i=0; i < this.x.length; i++){  this.cxt.beginPath();//context.beginPath() , 准备绘制一条路径if(this.clickDrag[i] && i){//当是拖动而且i!=0时，从上一个点开始画线。this.cxt.moveTo(this.x[i-1], this.y[i-1]);//context.moveTo(x, y) , 新开一个路径，并指定路径的起点}else{this.cxt.moveTo(this.x[i]-1, this.y[i]);}this.cxt.lineTo(this.x[i], this.y[i]);//context.lineTo(x, y) , 将当前点与指定的点用一条笔直的路径连接起来this.cxt.closePath();//context.closePath() , 如果当前路径是打开的则关闭它this.cxt.stroke();//context.stroke() , 绘制当前路径}},preventDefault:function(e){/*阻止默认*/var touch=this.touch ? e.touches[0] : e;if(this.touch)touch.preventDefault();else window.event.returnValue = false;},changeColor:function(){/*为按钮添加事件*/var t=this,iptNum=this.$("color").getElementsByTagName("i");for(let i=0,l=iptNum.length;i<l;i++){//这里要么用let,要么用闭包iptNum[i].index=i;iptNum[i].οnclick=function(){t.hideColorSpan();//隐藏所有颜色的选中t.colorSpan[i].style.display = 'block'//选中点击的颜色t.canvas.style.display = 'block';// debugger;t.cxt.save();t.cxt.strokeStyle = t.color[this.index];t.storageColor=t.color[this.index];t.$("hide").className = '';t.$("eraser").className = '';//清除橡皮擦选中状态t.cxt.strokeStyle = t.storageColor;t.isEraser=false;}}},resetEraser:function(_x,_y,touch){   var t=this;//this.cxt.lineWidth = 30;/*source-over 默认,相交部分由后绘制图形的填充(颜色,渐变,纹理)覆盖,全部浏览器通过*/t.cxt.globalCompositeOperation = "destination-out";t.cxt.beginPath();t.cxt.arc(_x, _y, t.eraserRadius, 0, Math.PI * 2);t.cxt.strokeStyle = "rgba(250,250,250,0)";t.cxt.fill();t.cxt.globalCompositeOperation = "source-over"},hideColorSpan:function(){//隐藏颜色的选中状态for(var i =0,length = this.colorSpan.length;i<length;i++){this.colorSpan[i].style.display =  'none'}}};paint.load();</script></body></html>

转载于:https://www.cnblogs.com/xiaochongchong/p/7833777.html

H5网页涂鸦canvas相关推荐

H5小游戏 - canvas涂鸦板
H5小游戏 - 涂鸦板效果截图: html代码如下: <!DOCTYPE html> <html><head><meta charset="utf ...
Canvas网页涂鸦板再次增强版
目录第一版Canvas涂鸦板第二版Canvas涂鸦板第三版Canvas涂鸦板体验涂鸦板第一版Canvas涂鸦板实现功能:在涂鸦板上鼠标按下去拖动的涂鸦效果实现思路:监听鼠标按下.移动.松 ...
7个H5网页制作工具全面介绍
目前市场上的各种H5网页制作工具,包括一个良好的印象,也真材实料.但如何区分?其实,最简单的方法是看该情况下,使用这些H5页的创作工具来进行什么样的H5的. 我在创作H5的时候遇到许多坑,在国内外所有 ...
乐乐音乐H5网页版-支持krc歌词(动感歌词、翻译和音译歌词)
# 简介 # 乐乐音乐H5网页版主要是基于uni-app框架开发的音乐播放器,目前只支持krc歌词(支持歌词颜色.字体大小.歌词进度调整和翻译和音译歌词),不支持歌词快进功能. # 环境配置 # ...
H5网页版贪吃蛇源代码
H5网页版贪吃蛇源代码,新建文本文档,将下面的代码复制粘贴到文本文档,然后保存文件.重命名文件及后缀名为index.html.将文章最下面的两个图片保存下来,蓝色背景大图重命名为back.jpg,骷髅 ...
html2canvas 把h5网页保存为图片区域保存
html2canvas 把h5网页保存为图片想把一个网页得某些元素,绘制成图片保存,有些数据是接口动态加载的,所以不能UI给到图片,需要我们把api的数据也绘制到图片上 html2canvas这个插 ...
挂代理无法访问网页了怎么办_微信H5网页授权
1 第一步:用户同意授权,获取code2 第二步:通过code换取网页授权access_token3 第三步:拉取用户信息(需scope为 snsapi_userinfo)SpringBoot:2.1 ...
h5网页在移动端（安卓）head里的title为空，默认显示url地址。js代码将head的title设置为空
h5网页在移动端(安卓)head里的title为空,默认显示url地址.js代码将head的title设置为空解决方案: document.title='\u200E' router.beforeE ...
如何将h5网页改成微信网页
1.如何将h5网页改成微信网页 1.设置安全域名先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名&qu ...

H5网页涂鸦canvas

H5网页涂鸦canvas相关推荐

最新文章

热门文章