web前端:画布-刮刮卡scratch手机端触摸效果
bigegpt 2024-10-12 06:29 4 浏览
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.图片资料
相关推荐
- Redis集群对比:主从复制、哨兵模式、Cluster一文看懂所有优缺点
-
在分布式系统中,Redis作为高性能的内存数据库,其集群方案的选择直接影响到系统的稳定性、可用性和扩展性。本文将全面对比Redis的三种主流集群方案:主从复制、哨兵模式和Cluster模式,帮助开发者...
- redis的主从复制,读写分离,主从切换
-
当数据量变得庞大的时候,读写分离还是很有必要的。同时避免一个redis服务宕机,导致应用宕机的情况,我们启用sentinel(哨兵)服务,实现主从切换的功能。redis提供了一个master,多个sl...
- # Redis 入门到精通(九)-- 主从复制(3)
-
#Redis入门到精通(九)--主从复制(3)##一、redis主从复制-常见问题(1)###1、伴随着redis系统的运行,master的数据量会越来越大,一旦master重启...
- redis - 主从复制(Redis主从复制时序图)
-
1引言在上一篇文章中,我们了解了Redis两种不同的持久化方式,Redis服务器通过持久化,把Redis内存中持久化到硬盘当中,当Redis宕机时,我们重启Redis服务器时,可以由RDB文件或AO...
- # Redis 入门到精通(九)-- 主从复制(2)
-
#Redis入门到精通(九)--主从复制(2)##一、redis主从复制--数据同步阶段注意事项###1、数据同步阶段master说明1)如果master数据量巨大,数据同步阶段应...
- Redis主从复制(redis主从复制主节点挂了)
-
介绍Redis有两种不同的持久化方式,Redis服务器通过持久化,把Redis内存中持久化到硬盘当中,当Redis宕机时,我们重启Redis服务器时,可以由RDB文件或AOF文件恢复内存中的数据。不过...
- 深入解析 Redis 集群的主从复制实现方式
-
在互联网大厂的后端开发领域,Redis作为一款高性能的内存数据库,被广泛应用于缓存、消息队列等场景。而Redis集群中的主从复制机制,更是保障数据安全、实现读写分离以及提升系统性能的关键所在。今...
- Redis主从架构详解(redis主从架构高可用如何实现)
-
Redis主从架构搭建Redis主节点配置创建主节点目录(/opt/redis-master),复制redis.conf到该目录下,redis.conf配置项修改#后台启动daemonizeyes...
- 抖音“四大包塘战神”:承包了全网的快乐
-
在抖音钓鱼垂类领域,"包塘战神"军团正掀起一场黑色幽默风暴。空军华、大表坑、李赔光、透心良四位创作者,以承包鱼塘为舞台,用连续翻车的钓鱼直播构筑起流量奇观。当钓鱼佬在抖音集体转型喜剧人...
- ORACLE 11G RAC 安装-通过VM配置共享磁盘
-
简介:在自己的电脑上通过VM软件搭建Oracle11GRAC,通过修改VM的参数文件来实现磁盘共享!目标:搭建RAC环境实现:使用VMwareWorkstation8.0.0+ORACLE...
- Linux操作系统安全配置(linux系统安全配置包括)
-
一、服务相关命令systemctlenable服务名#开机自启动systemctldisable服务名#禁用开机自启动systemctlstop服务名#停止服务systemctls...
- 关于Linux性能调优中网络I/O的一些笔记
-
写在前面和小伙伴分享一些Linux网络优化的笔记,内容很浅,可以用作入门博文内容结合《Linux性能优化》读书笔记整理涉及内容包括常用的优化工具(mii-tool,ethtool,ifconfig,i...
- 从 Sonatype Nexus Repository Manager 迁移到 Artifactory
-
1.Nexus1.1下载下载链接:https://help.sonatype.com/repomanager3/product-information/download/download-archiv...
- Ubuntu20安装zabbix5.0企业监控系统亲测教程
-
前言示例主机:zabbix10.0.100.10,将安装在UbuntuServer上教程说明:因使用官方教程无法安装成功,所以本教程与官方教程有所不同安装前提:已安装UbuntuServer2...
- Linux内核设计与实现—进程管理(linux内核程序设计)
-
进程进程就是处于执行期的程序(目标码存放在某种存储介质上)。进并不仅仅局限于一段可执行程序代码(Unix称其为代码段,textsection)。通常进程还要包含其他资源,像打开的文件,挂起的信号,...
- 一周热门
- 最近发表
- 标签列表
-
- mybatiscollection (79)
- mqtt服务器 (88)
- keyerror (78)
- c#map (65)
- xftp6 (83)
- bt搜索 (75)
- c#var (76)
- xcode-select (66)
- mysql授权 (74)
- 下载测试 (70)
- linuxlink (65)
- pythonwget (67)
- androidinclude (65)
- libcrypto.so (74)
- linux安装minio (74)
- ubuntuunzip (67)
- vscode使用技巧 (83)
- secure-file-priv (67)
- vue阻止冒泡 (67)
- jquery跨域 (68)
- php写入文件 (73)
- kafkatools (66)
- mysql导出数据库 (66)
- jquery鼠标移入移出 (71)
- 取小数点后两位的函数 (73)