刮刮卡制作过程_微信怎么制作刮刮卡

刮刮卡制作过程_微信怎么制作刮刮卡刮刮卡demo图样1.刮开涂层的绘制可以是画图,把涂层画上去varimageObj=newImage();imageObj.onload=function(){context.drawImage(imageObj,x,y,width,height);};imageObj.src=’path/to/my/image.jpg’;可以是是画灰色的区域co…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

刮刮卡demo图样

1073007-20180606151407973-408469812.gif

1.刮开涂层的绘制

可以是画图,把涂层画上去

var imageObj = new Image();
imageObj.onload = function() {
  context.drawImage(imageObj, x, y, width, height);
};
imageObj.src = 'path/to/my/image.jpg';

Jetbrains全家桶1年46,售后保障稳定

可以是是画灰色的区域

context.rect(x, y, width, height);
context.fill();
context.stroke();

2.刮开图像的绘制

需要用到canvas的这个属性globalCompositeOperation ,合并图像。
画一个新的源图像到已经画好的目标图像上面。利用destination-out值达到下面的效果,就像是擦去目标图像的图案一样。
1073007-20180606150824548-1793841347.png

context.globalCompositeOperation = 'source-atop|source-in|source-out|source-over|destination-atop|destination-in|destination-out|destination-over|lighter|xor|copy';

3.事件设置思路

有三个事件回调方法,down_fn,move_fn,up_fn.
当按下事件触发的时候,开关打开,同时设置移动事件和松开事件
然后当松开事件触发的时候就移除三个事件的设置。

注意

  • 1.需要在开始做一个回调事件执行一次的开关处理,当第一次移动的时候就触发回调,并且关闭开关,避免每次移动都会触发回调事件
  • 2.canvas的globalCompositeOperation属性需要在每次绘制完圆的时候,再重置回默认属性,否则二次绘制的时候绘制上去的是透明的图层
  • 3.文字需要做居中处理,可以使用textAlign做水平居中处理或者textBaseline做垂直居中处理

附录链接

  1. HTML5画布速查表

转载于:https://www.cnblogs.com/flora-dn/p/9145217.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/209941.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • STUN协议详解

    STUN协议详解   基于RFC3489标准的stun协议,无法穿越TCP类型NAT,只是适用于在现有NAT类型下的UDP穿越,另一种特殊情况NAT也无法进行穿越,就是对称型NAT,在很多企业中就很多属于对称型NAT,后面会讲到。STUN的发现过程是基于UDP的NAT处理的假设;随着新的NAT设备的部署,这些假设可能会被证明是无效的,当STUN被用来获取一个地址来与位于其在同一NAT后面的对等体通信时,它就不起作用了。当stun服务器的部署不在公共共享地址域范围内时,stun就不起作用。1.定义STUN客户端:产生

  • 创建Java中的线程池

    创建Java中的线程池

  • SHFileOperation DeleteFolder

    SHFileOperation DeleteFolder分类:C/C++BOOLDeleteFolder(LPCTSTRlpszPath){  SHFILEOPSTRUCTFileOp; ZeroMemory((void*)&FileOp,sizeof(SHFILEOPSTRUCT));  FileOp.fFlags=FOF_NOCONFIRMATION;  FileO

  • 彻底解决Qt中文乱码以及汉字编码的问题(UTF-8/GBK)

    彻底解决Qt中文乱码以及汉字编码的问题(UTF-8/GBK)一、Qt环境设置QtCreator,菜单->工具->选项->文本编辑器->行为->文件编码:默认编码:System(简体中文windows系统默认指的是GBK编码,即下拉框选项里的GBK/windows-936-2000/CP936/MS936/windows-936)二、编码知识科普Qt常见的两种编码是:UTF-8和GBK★UTF-8:UnicodeTransformat

  • lstm是rnn中的一种吗_经验公式是什么

    lstm是rnn中的一种吗_经验公式是什么前言好久没用正儿八经地写博客了,csdn居然也有了markdown的编辑器了,最近花了不少时间看RNN以及LSTM的论文,在组内『夜校』分享过了,再在这里总结一下发出来吧,按照我讲解的思路,理解RNN以及LSTM的算法流程并推导一遍应该是没有问题的。RNN最近做出了很多非常漂亮的成果,比如AlexGraves的手写文字生成、名声大振的『根据图片生成描述文字』、输出类似训练语料的文字等应用,都让人感

  • 大数据开发是干什么的?[通俗易懂]

    大数据开发是干什么的?[通俗易懂]据数联寻英发布《大数据人才报告》显示,目前全国的大数据人才仅46万,未来3-5年内大数据人才的缺口将高达150万,越来越多人加入到大数据培训,都希望在大数据培训机构中学习最前沿的知识,找一份不错的工作。大数据开发工程师主要负责的工作有以下内容:1.负责公司大数据平台的开发和维护,负责大数据平台持续集成相关工具平台的架构设计与产品开发等工作;2.主要从事网络日志的大数据分析工作,包括…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号