百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

web前端:画布-刮刮卡scratch手机端触摸效果

bigegpt 2024-10-12 06:29 3 浏览

1.应用canvas知识点

(1)drawImage(image,x,y,width,height)

  • image:是image或者canvas对象,(x,y)为在canvas中的起始坐标
  • width/height:图片的宽高设置

(2)globalCompositeOperation:全局复合/合成操作

全局透明度globalAlpha=value(0.0-1.0)默认1.0
* 1.source:(源)新的图像
* 2.destination:(目标)已绘制的图像

  • |- source-over(默认值):源在上面,新的图像层级较高
  • |- source-in:只留下源、目标的重叠部分(参照源的部分)
  • |- source-out:只留下源、目标不重叠的部分(参照目标,留下非目标=源)
  • |- source-atop:砍掉源溢出的部分 * |- destination-over:目标在上面,旧的图像层级较高 * |- destination-in:只留下源、目标的重叠部分(参照目标的部分) * |- destination-out:--->只留下源、目标不重叠的部分(参照源,留下非源=目标) * |- destination-atop:砍掉目标溢出的部分 1234

(3)canvas绘制图形

  • 1.圆形:arc(x,y(圆形位置),radius半径,startAngle开始角度,endAngle结束角度,anticlockwise时间方向-true逆时针|false顺时针)
    * |- arc(x,y,radius,startAngle,endAngle,anticlockwise)
    * |- arcTo(x1,y1,x2,y2,radius),起点(x1,y1),方向(x2,y2)
  • 2.canvas绘制线条lineTo
    * lineCap:绘制线条末端的属性,默认butt
    * 线条路径控制
    * butt:以方形结束 round:以圆形结束 square:以方形结束
    * lineJoin:线样式,round圆角bevel斜角miter支教

2.效果图




4.less

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    overflow: hidden;
    body {
        height: 100%;
        #wrap {
            height: 100%;
            #wrap-canvas {
                position: absolute;
                //background: lightgoldenrodyellow;
                left: 0;
                top: 0;
                //加入opacity透明动画
                transition: 2s;
            }
            ul {
                height: 100%;
                li {
                    height: 100%;
                    background: url(../img/刮刮卡scratch-card-3.jpg);
                    background-size: 100% 100%;
                }
            }
        }
    }
}

5.css

* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
  overflow: hidden;
}
html body {
  height: 100%;
}
html body #wrap {
  height: 100%;
}
html body #wrap #wrap-canvas {
  position: absolute;
  left: 0;
  top: 0;
  transition: 2s;
}
html body #wrap ul {
  height: 100%;
}
html body #wrap ul li {
  height: 100%;
  background: url(../img/刮刮卡scratch-card-3.jpg);
  background-size: 100% 100%;
}

6.js

/*
 * drawImage(image,x,y,width,height)
 *   image:是image或者canvas对象,(x,y)为在canvas中的起始坐标
 *   width/height:图片的宽高设置
 * canvas设置BG图片(image对象,repetition重复/平铺方式)
 * createPattern(image,repetition)
 *   |-repetition:repeat、repeat-x、repeat-y、no-repeat
 *   |-一般将createPattern返回的对象作为fillStyle的值
 * 1.将画布导出为png图像:toDataURL()为base64编码的图片
 * 2.事件操作:canvasPen.isPointInPath(x,y):判断在当前路径中,是否包含该点(只作用在最新画出的图像)
 */
$(function(){
	var canvasNode=document.querySelector("#wrap-canvas");
	canvasNode.width=document.documentElement.clientWidth;
	canvasNode.height=document.documentElement.clientHeight;
	if(canvasNode.getContext){
		var canvasPen=canvasNode.getContext("2d");
		var imgScreen=new Image();
		imgScreen.src="img/刮刮卡scratch-card-1-1.jpg";
		imgScreen.onload=function(){
			screenDraw();
		}
	}
	
	function screenDraw(){
		//宽高为用户视口宽高
		canvasPen.drawImage(imgScreen,0,0,canvasNode.width,canvasNode.height);
		//判断透明时,flag,每次渲染画布生效
		var opacityFlag=0;
		
		//导出图像
		var canvasPic=canvasNode.toDataURL();
		console.log("导出的图像:",canvasPic);
		
		//1.点击时生效,覆盖原图层:获取listener,移动端touchstart=on mouse start
		canvasNode.addEventListener("touchstart",function(e){
			//兼容可简写:ev=ev || window.event;默认event带window.,如果ev存在 ||之后不执行 ,如果ev不存在 || 之后执行event
			e=e || event;
			//获取点击列表:changedTouches,get第一个点
			var touchPoints=e.changedTouches[0];
			//坐标点:这里为0,一般如果画布不为全屏,需要-减去canvas的left
			var pointX=touchPoints.clientX-canvasNode.offsetLeft;
			var pointY=touchPoints.clientY-canvasNode.offsetTop;
			
			//原型笔触
			canvasPen.save();
			//canvasPen.fillStyle="tomato";
			/*1.全局透明度globalAlpha=value(0.0-1.0)默认1.0
			 * 2.source:(源)新的图像
			 * 3.destination:(目标)已绘制的图像
			 * 4.globalCompositeOperation:全局复合/合成操作
			 * |- source-over(默认值):源在上面,新的图像层级较高
			 * |- source-in:只留下源、目标的重叠部分(参照源的部分)
			 * |- source-out:只留下源、目标不重叠的部分(参照目标,留下非目标=源)
			 * |- source-atop:砍掉源溢出的部分
			 * 
			 * |- destination-over:目标在上面,旧的图像层级较高
			 * |- destination-in:只留下源、目标的重叠部分(参照目标的部分)
			 * |- destination-out:--->只留下源、目标不重叠的部分(参照源,留下非源=目标)
			 * |- destination-atop:砍掉目标溢出的部分
			 *  
			 * canvas绘制圆形
			 *  arc(x,y(圆形位置),radius半径,startAngle开始角度,endAngle结束角度,anticlockwise时间方向-true逆时针|false顺时针)
			 *   |- arc(x,y,radius,startAngle,endAngle,anticlockwise)
			 * arcTo(x1,y1,x2,y2,radius),起点(x1,y1),方向(x2,y2)
			 * 
			 * lineCap:绘制线条末端的属性,默认butt
		     * 线条路径控制
		     * butt:以方形结束  round:以圆形结束  square:以方形结束
		     * lineJoin:线样式,round圆角bevel斜角miter支教
		     */
			
			canvasPen.globalCompositeOperation="destination-out";
			/*避免arc异常,划线*/
			canvasPen.lineWidth=50;
			canvasPen.lineCap="round";
			canvasPen.lineJoin="round";
			canvasPen.beginPath();
			//canvasPen.arc(pointX,pointY,50,0,360*Math.PI/180);
			//canvasPen.fill();
			/*这里的arc有bug,如果滑动时间快,会出现异常*/
			canvasPen.moveTo(pointX,pointY);
			canvasPen.lineTo(pointX+1,pointY+1);
			canvasPen.stroke();
			
			canvasPen.restore();
		});
		
		//2.移动时生效,覆盖原图层
		canvasNode.addEventListener("touchmove",function(e){
			//兼容可简写:ev=ev || window.event;默认event带window.,如果ev存在 ||之后不执行 ,如果ev不存在 || 之后执行event
			e=e || event;
			//获取点击列表:changedTouches,get第一个点
			var touchPoints=e.changedTouches[0];
			//坐标点:这里为0,一般如果画布不为全屏,需要-减去canvas的left
			var pointX=touchPoints.clientX-canvasNode.offsetLeft;
			var pointY=touchPoints.clientY-canvasNode.offsetTop;
			
			//原型笔触
			canvasPen.save();
			canvasPen.globalCompositeOperation="destination-out";
			canvasPen.lineWidth=80;
			canvasPen.lineCap="round";
			//move时,不需要重新开始path路径
			canvasPen.beginPath();
			//canvasPen.arc(pointX,pointY,50,0,360*Math.PI/180);
			//canvasPen.fill();
			canvasPen.moveTo(pointX,pointY);
			canvasPen.lineTo(pointX+1,pointY+1);
			canvasPen.stroke();
			canvasPen.restore();
		});
		
		//3.点击离开时生效,全显
		canvasNode.addEventListener("touchend",function(){
			//获取所有像素
			var imgData=canvasPen.getImageData(0,0,canvasNode.width,canvasNode.height);
			//获取data中的所有像素点
			var allPoints=imgData.width*imgData.height;
			for(var i=0;i<allPoints;i++){
				//rgba第4个,判断透明
				if(imgData.data[4*i+3]===0){
					opacityFlag++;
				}
			}
			//当points大于1/2画布,则消失原始图层source
			if(opacityFlag>=allPoints/2){
				canvasNode.style.opacity=0;
			}
		});
		
		//4.判断过渡执行完毕
		canvasNode.addEventListener("transitionend",function(e){
			this.remove();
			//像素点判断,可忽略操作
			/*e=e || event;
			var pointInPathX=e.clientX-canvasNode.offsetLeft;
			var pointInPathY=e.clientY-canvasNode.offsetTop;
			if(canvasPen.isPointInPath(pointInPathX,pointInPathY){
				alert("刮刮卡出来了,恭喜您获得价值100万学习资料赞助!");
			}*/
			
		});
	}
})

7.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
		<title>canvas-刮刮卡scratch card</title>
	</head>
	<link rel="stylesheet" href="../6-bootstrap/css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/19-canvas-scratch-card.css" />
	<body>
		<div id="wrap">
			<canvas id="wrap-canvas"></canvas>
			<ul>
				<li></li>
			</ul>
		</div>
	</body>
	<script type="text/javascript" src="../6-bootstrap/js/jquery.min.js"></script>
	<script type="text/javascript" src="../6-bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/19-canvas-scratch-card.js"></script>

</html>

8.图片资料


相关推荐

恢复软件6款汇总推荐,帮你减轻数据恢复压力!

在当今数字化生活中,数据丢失的风险如影随形。无论是误删文件、硬盘故障,还是遭遇病毒攻击,丢失的数据都可能给我们带来不小的麻烦。此时,一款优秀的数据恢复软件就成为了挽救数据的关键。今天,为大家汇总推荐...

中兴星星一号刷回官方原版recovery的教程

【搞科技教程】中兴星星一号的官方recovery也来说一下了,因为之前给大家分享过了第三方的recovery了,之前给大家分享的第三方recovery也是采用一键刷入的方式,如果细心的朋友会发现,之前...

新玩机工具箱,Uotan柚坛工具箱软件体验

以前的手机系统功能比较单调,各厂商的重视程度不一样,所以喜欢玩机的朋友会解锁手机系统的读写权限,来进行刷机或者ROOT之类的操作,让使用体验更好。随着现在的手机系统越来越保守,以及自身功能的增强,...

三星g906k刷recovery教程_三星g906k中文recovery下载

【搞科技教程】看到有一些机友在找三星g906k的第三方recovery,下面就来说一下详细的recovery的刷入方法了,因为手机只有有了第三方的recovery之后才可以刷第三方的root包和系统包...

中兴星星2号刷recovery教程_星星二号中文recovery下载

【搞科技教程】咱们的中兴星星2手机也就是中兴星星二号手机的第三方recovery已经出来了,并且是中文版的,有了这个recovery之后,咱们的手机就可以轻松的刷第三方的系统包了,如果没有第三方的re...

数据恢复软件有哪些值得推荐?这 6 款亲测好用的工具汇总请收好!

在数字生活中,数据丢失的阴霾常常突如其来。无论是误删工作文档、格式化重要磁盘,还是遭遇系统崩溃,都可能让我们陷入焦虑。关键时刻,一款得力的数据恢复软件便是那根“救命稻草”。今天,为大家精心汇总6...

中兴u956刷入recovery的教程(中兴e5900刷机)

【搞科技教程】这次主要来给大家说说中兴u956手机如何刷入第三方的recovery,因为第三方的recovery工具是咱们刷第三方rom包的基础,可是很我欠却不会刷,所以太这里来给大家整理了一下详细的...

联想A850+刷recovery教程 联想A850+第三方recovery下载

【搞科技教程】联想A850+的第三方recovery出来了,这个第三方的recovery是非常的重要的,比如咱们的手机要刷第三方的系统包的时候,都是需要用到这个第三方的recovery的,在网上也是有...

工具侠重大更新 智能机上刷机一条龙完成

工具侠是针对玩机的机油开发的一款工具,不管是发烧级别的粉丝,还是普通小白用户,都可以在工具侠上找到你喜欢的工具应用。这不,最新的工具侠2.0.16版本,更新了专门为小白准备的刷机助手工具,以及MTK超...

shift+delete删除的文件找回6种硬盘数据恢复工具

硬盘作为电脑的重要存储设备,如同一个巨大的数字仓库,承载着我们日常工作、学习和生活中的各种文件,从珍贵的照片、重要的工作文档到喜爱的视频、音乐等,都依赖硬盘来安全存放。但有时,我们可能会不小心用sh...

使用vscode+Deepseek 实现AI编程 基于Cline和continue

尊敬的诸位!我是一名专注于嵌入式开发的物联网工程师。关注我,持续分享最新物联网与AI资讯和开发实战。期望与您携手探寻物联网与AI的无尽可能。这两天deepseek3.0上线,据说编程能力比肩Cl...

详解如何使用VSCode搭建TypeScript环境(适合小白)

搭建Javascript环境因为TypeScript不能直接在浏览器上运行。它需要编译器来编译并生成JavaScript文件。所以需要首先安装好javascript环境,可以参考文章:https://...

使用VSCode来书写你的Jupyter Notebooks

现在你可以在VScode里面来书写你的notebook了,使用起来十分的方便。下面来给大家演示一下环境的搭建。首先需要安装一个jupyter的包,使用下面的命令安装:pip3install-ih...

使用VSCode模板提高Vue开发效率(vscode开发vue插件)

安装VSCode安装Vetur和VueHelper插件,安装完成后需要重启VScode。在扩展插件搜索框中找到如下Vetur和VueHelper两个插件,注意看图标。添加Vue模板打...

干货!VsCode接入DeepSeek实现AI编程的5种主流插件详解

AI大模型对编程的影响非常之大,可以说首当其冲,Cursor等对话式编程工具渐渐渗透到开发者的工作中,作为AI编程的明星产品,Cursor虽然好用,但是贵啊,所以咱们得找平替,最好免费那种。俗话说,不...