微信小程序名片创建_canvas完成刮刮卡效果

  • 栏目:行业动态 时间:2021-01-12 13:01 分享新闻到:
<返回列表

canvas实现刮刮卡效果       本文主要介绍了使用canvas实现刮刮卡效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧

目前在html5和css3的热潮下,html页面的效果也是层出不穷,下面我们来介绍使用canvas来模仿刮奖刮开效果。

原理

在需要刮出的图片或者文字上方盖上一层灰色或者其他背景的canvas画布,当手指或者鼠标点击画布并移动时,将画布上移动过的轨迹变成透明即可。

分析

demo中在class为content的div上盖上一层灰色的画布,然后通过获取鼠标和手指的坐标计算出在画布位置上的坐标,通过在坐标原点位置画一个半径10px的透明圆形来透过画布,显示出画布下的内容。本demo是用时需要改变的内容为_width,_height,touchTop,touchLeft这几个参数,根据自身画布的位置自行计算即可。由于是长按事件,记得在移动端阻止浏览器默认功能。

效果图:

图(1)初始图

图(2)刮开效果

代码如下:

 !doctype html 
 html 
 head 
 meta charset="utf-8" 
 title 无标题文档 /title 
 meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" / 
 style 
.content,.cover{width:400px; height:400px; position:absolute; left:50%; top:50%; margin:-200px 0 0 -200px;}
.content{ font-size:48px; line-height:400px; text-align:center;}
h3{ text-align:center; line-height:200px;}
 /style 
 /head 
 body 
 h3 快来刮开!!! /h3 
 div 中奖啦~! /div 
 canvas id="cover" width="400" height="400" /canvas 
 /body 
 script 
var isdown = false,
 cover = document.getElementById("cover"),
 covercanvas = cover.getContext("2d");
 covercanvas.fill ;
 covercanvas.fillRect(0,0,400,400);
 function fillter( canvas ){
 canvas.fill ;
 canvas.fillRect(0,0,400,400);
 function isDown(e){
 e.preventDefault();
 isdown=true; 
 function isUp(e){
 isdown=false; 
 function draw( e ){
 e.preventDefault();
 if(isdown){
 if(e.changedTouches){
 e=e.changedTouches[e.changedTouches.length-1];
 var _height= parseInt((window.innerHeight-400)/2),
 _width= parseInt((window.innerWidth-400)/2),
 touchTop=e.clientY - _height,
 touchLeft=e.clientX - _width;
 with(covercanvas){
 beginPath();
 arc(touchLeft, touchTop, 10, 0, Math.PI * 2);
 fill();
 //alert(touchTop);
 fillter(covercanvas);
 covercanvas.globalCompositeOperation = 'destination-out';
 cover.addEventListener('touchstart',isDown);
 cover.addEventListener('touchmove',draw);
 cover.addEventListener('touchend',isUp);
 cover.addEventListener('mousemove',draw);
 cover.addEventListener('mousedown',isDown);
 cover.addEventListener('mouseup',isUp);
 /script 
 /html 

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持凡科!

分享新闻到:

更多阅读

微信小程序名片创建_canvas完成刮刮卡效果

行业动态 2021-01-12
canvas完成刮奖实际效果 文中关键详细介绍了应用canvas完成刮奖实际效果的案例。具备非...
查看全文

无锡小程序开发-网络服务器安全:如何去

行业动态 2021-01-12
网络服务器在互联网机构中是非常非常容易网站被黑客对于进攻的,提升Web网络服务器安全性...
查看全文

什么微信小程序_Bootstrap完成的经典栅格布

行业动态 2021-01-12
Bootstrap完成的經典栅格数据合理布局实际效果案例【附demo源代码】 本文关键详细介绍了...
查看全文
返回全部新闻


区域站点: 南丰县如何创建小程序   南宫市免费制作小程序   囊谦县自助下单小程序怎么做   南和县h5小程序   南华县如何创建小程序   南江县免费制作小程序   南京市自助下单小程序怎么做   南靖县h5小程序   南康市如何创建小程序   南乐县免费制作小程序   南陵县自助下单小程序怎么做   南宁市h5小程序   南平市如何创建小程序   南皮县免费制作小程序   南市区自助下单小程序怎么做   南通市h5小程序   南投县如何创建小程序   南雄市免费制作小程序   南溪县自助下单小程序怎么做   南阳市h5小程序   南漳县如何创建小程序   南召县免费制作小程序   南郑县自助下单小程序怎么做   那坡县h5小程序   那曲县如何创建小程序   纳雍县免费制作小程序   讷河市自助下单小程序怎么做   内黄县h5小程序   内江市如何创建小程序   内丘县免费制作小程序   内乡县自助下单小程序怎么做   嫩江市h5小程序   聂荣县如何创建小程序   尼玛县免费制作小程序   尼木县自助下单小程序怎么做   宁安市h5小程序   宁波市如何创建小程序   宁城县免费制作小程序   宁德市自助下单小程序怎么做   宁都县h5小程序   宁国市如何创建小程序   宁海县免费制作小程序   宁化县自助下单小程序怎么做   宁晋县h5小程序   宁陵县如何创建小程序   宁明县免费制作小程序   宁南县自助下单小程序怎么做   宁强县h5小程序   宁陕县如何创建小程序   宁武县免费制作小程序   宁乡市自助下单小程序怎么做   宁阳县h5小程序   宁远县如何创建小程序   农安县免费制作小程序   磐安县自助下单小程序怎么做   盘锦市h5小程序   盘山县如何创建小程序   磐石市免费制作小程序   盘州市自助下单小程序怎么做   蓬安县h5小程序   澎湖县如何创建小程序   蓬莱市免费制作小程序   彭山县自助下单小程序怎么做   蓬溪县h5小程序   彭阳县如何创建小程序   彭泽县免费制作小程序   彭州市自助下单小程序怎么做   偏关县h5小程序   平安县如何创建小程序   平昌县免费制作小程序   平定县自助下单小程序怎么做   屏东县h5小程序   平度市如何创建小程序   平果县免费制作小程序   平和县自助下单小程序怎么做   平湖市h5小程序   平江县如何创建小程序   平乐县免费制作小程序   平凉市自助下单小程序怎么做   平利县h5小程序   平罗县如何创建小程序   平陆县免费制作小程序   屏南县自助下单小程序怎么做   平泉市h5小程序   屏山县如何创建小程序   平顺县免费制作小程序   平塘县自助下单小程序怎么做   平潭县h5小程序   平武县如何创建小程序   萍乡市免费制作小程序   平乡县自助下单小程序怎么做   平阳县h5小程序   平遥县如何创建小程序   平阴县免费制作小程序   平邑县自助下单小程序怎么做   平远县h5小程序   平舆县如何创建小程序   皮山县免费制作小程序   普安县自助下单小程序怎么做   浦北县h5小程序   浦城县如何创建小程序   普洱市免费制作小程序   普格县自助下单小程序怎么做   浦江县h5小程序   普兰县如何创建小程序   普宁市免费制作小程序   莆田市自助下单小程序怎么做   迁安市h5小程序   乾安县如何创建小程序   潜江市免费制作小程序   潜山市自助下单小程序怎么做  

友情链接: H5建站 h5答题模板 微信公众号h5制作 h5转小程序 手机版

Copyright © 2002-2020 自助下单小程序怎么做_h5小程序_如何创建小程序_免费制作小程序_微信小程序店铺 版权所有 (网站地图) 备案号:粤ICP备10235580号