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

刮刮卡制作过程_微信怎么制作刮刮卡刮刮卡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)


相关推荐

发表回复

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

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