우리는 종종 Wechat 복권, Taobao Lottery, Thunder Money-Making Bao Disk Lottery 활동 등과 같은 복권 활동을 수행하기 위해 일정 금액을 구매하는 것과 같은 다양한 전자 상거래 홍보 활동에 종종 참여합니다.이 추첨은 부분적으로 HTML5 Canvas에 의해 만들어집니다. 오늘 저는 HTML5 캔버스를 사용하여 디스크 추첨 기능을 만드는 방법을 공유하겠습니다. 평소와 같이 먼저 렌더링을 살펴 보겠습니다.
캔버스의 주요 API를 살펴 보겠습니다.
모든 소스 코드는 다음과 같습니다.
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> html5 캔버스 디스크 복권 응용 프로그램 데모 데모 데모 </title> <meta name = "viewport"content = "width = device-width, initial-scale = 1. 0px; font-size : 16px; font-family : "Microsoft Yahei";}. XTTBLOG_BOX {너비 : 300px; 높이 : 300px; 마진 : 100px 자동; 위치 : 상대; } .xttblog_box canvas {position;}#xttblog {back 20;}#xttblog {-o-transform : transform 6s; -ms-transform : transform 6s; -moz-transform : 변환 6; -webkit-transform : 변환 6s; 전이 : 변환 6s; -O- 변형-오리핀 : 50% 50%;-MS- 변환-오리핀 : 50% 50%;-MOZ- 변환-오리진 : 50% 50%;-WebKit-Transform-origin : 50% 50%; 변환-오리 진 : 50% 50%;}. 60px; 왼쪽 : 120px; 상단 : 120px; 국경-라디우스 : 100%; 위치 : 절대; 커서; 커서; 포스터; 국경 : 없음; 배경 : 투명; 개요 : 없음; z- 안덱 : 40;} <스크립트 유형 = "text/javascript" src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <cript> $ (document) .ready (function () {// rotation var var angles; // var clicknum = 5; // wincond var rotnum = 0; // rotnum의 번호 var var var var angles; var color = "#626262", "#787878", "rgba (0,0,0,0.5)", "#dcc722", "white", "#ff4350"]; [ '여전히 열심히 일하고', '위안', '골드 코인', '위안', '골드 코인'] 캔버스 룬 (); bind ( 'click', function () {1) {// clicknum (clicknum); 턴테이블 회전 프로세스 "시작"버튼은 $ ( '#tupbtn')를 클릭 할 수 없습니다. ( "비활성화 된", true); } alert (dear, dear}); $ ( '#xttblog') $ ( '#xttblog') info [0]; 2160 + 1935; 그렇지 않으면 (Num == 5) {angles = 2160 * rotnum + 2070; info [1] [1]}; Canvas02 = getElementById ( 'XTTBLOG02'); CreateCircle (); startangle. ctx.restore (); ctx. ctx.filltext (info1 [i], -30, -95,60); CTX1.LLINETO (100,24); CTX3. CTX3.FILL (); CTX3. 'START', 80,90,40; COLL [2]; ctx2.fill ();}; 브라우저는이를 지원하지 않습니다. </canvas> <canvas id = "xttblog01"> 죄송합니다! 브라우저는이를 지원하지 않습니다. </canvas> <canvas id = "xttblog03"> 죄송합니다! 브라우저는이를 지원하지 않습니다. </canvas> <canvas id = "xttblog02"> 죄송합니다! 브라우저는이를 지원하지 않습니다. </canvas> <button id = "tupbtn"> </button> </div> <!-시스템 기본 팝업 창 변경-> <script type = "text/javaScript"> wind Shield.id = "Shield"; Shield.style.position = "절대"; Shield.style.left = "50%"; Shield.style.top = "50%"; Shield.style.width = "280px"; Shield.style.height = "150px"; Shield.style.marginleft = "-140px"; Shield.style.margintop = "-110px"; Shield.style.zindex = "25"; var alertfram = document.createElement ( "div"); alertfram.id = "alertfram"; alertfram.style.position = "절대"; alertfram.style.width = "280px"; alertfram.style.height = "150px"; alertfram.style.left = "50%"; alertfram.style.top = "50%"; alertfram.style.marginleft = "-140px"; alertfram.style.margintop = "-110px"; alertfram.style.textalign = "Center"; alertfram.style.lineheight = "150px"; alertfram.style.zindex = "300"; strhtml = "<ul style =/"목록 스타일 : 없음; 마진 : 0px; 패딩 : 0px; 너비 : 100%/">/n"; strhtml += "<li style =/"배경 : #626262; 텍스트-정렬 : 왼쪽; 왼쪽; 왼쪽; 패딩-왼쪽 : 20px; 글꼴 크기 : 14px; font-weight : 굵은; 높이 : 25px; 라인 높이 : 25px; 테두리 : 1px solid #f9cade; white/"> [Winning RELANDER] </li>/n"; strhtml+= "<li style =/"background : #787878; 텍스트-정렬 : 중심; 센터; font-size : 12px; 높이 : 95px; 라인-리이트 : 95px; 테두리-왼쪽 : 1px solid #f9cade; 경계 : 1px 솔리드 #f9cade; strhtml += "<li style =/"배경 :#626262; 텍스트-정렬 : 중심; 글꼴 중심 : 볼드; 높이 : 30px; 선-리이트 : 25px; 테두리 : 1px solid #f9cade;/"> <입력 유형 =/"버튼/"value =/"ok/"onclick =/"dook ()/"style =/"width : 80px; 높이 : 20px; 배경 : #626262; 색상 : 흰색; 테두리 : 1px 단단한 흰색; font-size : 14px : 20px; 렌즈 라인; 4px/"/> </li>/n"; strhtml += "</ul>/n"; alertfram.innerhtml = strhtml; document.body.appendChild (AlertFram); document.body.appendChild (방패); this.dook = function () {alertfram.style.display = "none"; Shield.style.display = "none"; } alertfram.focus (); document.body.onselectstart = function () {return false;};} </script> </body> </html>위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.
원본 주소 : http://www.xttblog.com/?p=399