내가 전에 한 프로젝트 중에는 복권 턴테이블 기능이 필요한 사람들이 있습니다. 이 프로젝트는 한동안 완료되었으며 심각한 버그가 없으므로 지금 여러분과 공유하겠습니다.
기능적 요구 사항
1. 턴테이블은 아름답고 회전 효과가 매끄러워 야합니다.
2. 상금 사진은 턴테이블에 표시되어야하며상은 배경에서 읽은 사진과 이름입니다.
3. 회전 애니메이션이 완료되면 해당 프롬프트가 있어야합니다.
4. 획득 된 상에 대한 특정 알고리즘은 데이터베이스에서 작동하며 프론트 엔드는 최종 효과 디스플레이 만 제공합니다.
지식의 핵심 요점
1. JQ 플러그인이 참조됩니다 : AwardRotate는보다 지능적인 회전을 달성하는 데 사용됩니다 (플러그인 다운로드 : http://www.jqcool.net/jquery-jqueryrotate.html).
2. 캔버스 태그와 해당 HTML5 API를 사용하여 작동합니다. (캔버스 중국어 매뉴얼은 http://javaScript.ruanyifeng.com/htmlapi/canvas.html에서 볼 수 있습니다
텍스트
큰 턴테이블 스타일을 인용하십시오
.lunck_draw_wrap {display : block; 너비 : 95%; 마진-오른쪽 : auto;} .lunck_draw_wrap .turnplate {display : block; 너비 : 106%; 위치 : 상대;} .lunck_draw_wrap .Turnplate Canvas.Item {왼쪽 : 1px; 위치 : 상대; 상단 : 9px; 폭 왼쪽 : 34.6%; 위치 : 절대; 상단 : 30%; 너비 : 31.5%;}턴테이블 플러그인에 필요한 매개 변수 :
var turnplate = {restaraunts : [], // 큰 턴 플레이트 상금 이름 럭키 : [], // 큰 턴 플레이트 콘텐츠 색상 : [], // 큰 턴 플레이트 상금 블록에 해당합니다. InsiderAdius : 65, // 큰 턴 플레이트의 내부 원의 반경 시작판 시작 : 0, // 각도 시작 브로테이트 : false : false : stop; ture : rotate};매개 변수에서 우리는 해당 상 명, 상 콘텐츠, 상금 그림 페이지 레이블 및 기타 정보를 얻은 다음 큰 턴테이블을 렌더링해야합니다.
따라서 우리의 첫 번째 단계는 서버에 요청을 보내어 해당 상금 정보를 얻고 큰 턴테이블을 생성하는 데 필요한 배열 매개 변수로 이동하는 것입니다.
$ .Each (data.list, function (key, value) {turnplate.restaraunts.push (value.data0); turnplate.lucky.push (value.data1); turnplate.goodsimgarr.push (getluckyimg + value.data4); if (key %2 == 0) turnplate.colors.push ( "#fff"); turnplate.colors.push ( "#5fcbd4");data.list는 내가 얻은 JSON 데이터입니다.
[{ "data0": "First Prize", "Data1": "iPhone6S", "Data2": "0", "Data3": "0", "Data4": "201510161406303384.png": "Data5": "XXXX Network Technology", "Data6": "XXXXXX, Kecheng City", Zhejang yov, "Zhejiang -yopy" "data7": "0570-xxxxxx"}, ......]고객은 상을 "참여해 주셔서 감사합니다"가 필요하기 때문에 최소상은 "상을 수상한"것입니다. 따라서 상을 통과 한 후 "상금"에 대한 렌더링 설명을 삽입하십시오.
turnplate.goodsimgarr.push ( '../ images/hongbao.png') turnplate.restaraunts.push ( "Winner"); turnplate.colors.push ( "#5fcbd4"); // 페이지의 모든 요소가로드 된 후에는 DrawRoulettewHeel () 메소드를 실행하여 Turntable Preloadimages (turnplate.goodsimgarr) .done (function (images) {DrawRouleteWheel ();});이미지 로딩에 시간이 걸리고 캔버스를 사용하여 이미지를 복사하기 전에 이미지를 그릴 수 있기 전에 이미지를로드해야하므로 모든 상을 모두로드 한 후에는 대형 턴테이블을 렌더링하기 위해 예압을 사용했습니다.
// preload function preloadimages (arr) {var newimages = [], loadedImages = 0 var postaction = function () {} // postaction 함수가 여기에 추가되었습니다 var arr = (typeof arr! = "object") [arr] : arr function imageloadpost () {loadedEdimages ++ if (loadedEimages ==) postaction function 및 newimages 배열을 매개 변수로 전달합니다. return {// 빈 객체의 완료된 메소드가 여기에서 반환됩니다 : function (f) {postaction = f || Postaction}}}턴테이블 코드를 그리십시오.
함수 drawRouletEwHeel () {var canvas = document.getElementById ( "wheelCanvas"); if (canvas.getContext) {// 상금 수에 따라 원주 각도를 계산합니다. var ctx = canvas.getContext ( "2d"); // 주어진 사각형의 사각형을 지우십시오. ctx.clearrect (0,0,422,422); // Strokestyle 속성 속성 세트 또는 리턴 스트로크 CTX.strokestyle = "RGBA (0,0,0,0)"; // 글꼴 속성 설정 또는 캔버스 CTX에서 텍스트 내용의 현재 글꼴 속성을 반환합니다 .font = 'Bold 18px Microsoft Yahei'; for (var i = 0; i <turnplate.restaraunts.length; i ++) {// 현재 상인 var angle = turnplate.startangle+i * arc; // 상금 매개 변수에 따라 팬 채우기 색상을 그립니다. ctx.fillstyle = turnplate.colors [i]; // 팬 그리기 시작 ctx.beginpath (); // 아크 (X, y, r, 시작 각도, 엔드 각도, 드로우 방향) 메소드는 아크/곡선을 만듭니다 (원 또는 부분 원을 생성하는 데 사용) // 큰 원 ctx.arc (212,212, turnplate.outsideradius, angle, angle + arc, false); // 작은 원을 그리는 ctx.arc (212,212, turnplate.insideradius, angle + arc, angle, true); ctx.stroke (); ctx.fill (); // 캔버스 잠금 (이전 캔버스 상태를 저장하려면) ctx.save (); // --- 상금 시작 ---- // 가격 기본 글꼴 색상 ctx.fillStyle = "#fff"; var text = turnplate.restaraunts [i]; var lukyname = turnplate.lucky [i]; var line_height = 17; // 캔버스 위치에서 메소드 재발 (0,0) 번역 CTX.TransLate (212 + math.cos (angle + arc /2)* turnplate.textradius, 212 + math.sin (angle + arc /2)* turnplate.textradius); // 회전 메소드는 현재 그리기 CTX.Rotate (Angle + arc /2+Math.pi /2)를 회전시킵니다. // 상을 그리는 상을 그립니다 var img = newImage (); img.src = turnplate.goodsimgarr [i]; Ctx.DrawImage (IMG, -17,35); // 설계된 턴테이블 컬러 블록은 인터리브되므로 (i %2 == 0) {ctx.fillStyle = "#f7452f"인 인접 상 구역에서 다른 글꼴 색상을 달성 할 수 있습니다. } // 해당 좌표 Ctx.fillText (텍스트, -ctx.measureText (text) .width /2,0)에서 글꼴을 그립니다. // 글꼴 CTX.FONT = '14PX Microsoft Yahei'; // 상금 이름을 If (text! = "Winning Prize") {ctx.fillText (lukyname, -ctx.measuretext (lukyname) .width /2,25); } else {ctx.fillText ( "Youmai Coin", -ctx.measuretext ( "Youmai Coin"). 너비 /2,25); } // 이전 캔버스 (insert)를 이전 save () state ctx.restore () 앞에 반환합니다. ctx.save (); // ----------------------------}}}기본적으로 각 단계에 대한 의견이 있습니다. 캔버스 방법을 이해하지 못하면 Baidu를 사용하거나 위에서 공유 한 중국어 매뉴얼을 쿼리 할 수 있습니다.
HTML 코드는 다음과 같습니다.
<divclass = "lunck_draw_wrap"> <divclass = "turnplate"style = "배경 크기 : 100%100%;"> <canvasclass = "item"id = "wheelcanvas"width = "422px"height = "422px"> </canvas> <imgclass = "pointer"style = 0px; 0px; 높이 : 100%; "src ="../ images/chouzhang12.png "/> <imgclass ="포인터 "src ="../ images/hianji .png "/> </div
생식 이미지 :
이벤트를 클릭하여 코드를 실행합니다.
$ ( '. lunck_draw_wrap'). delegate ( "img.pointer", "click", function () {function () {if (turnplate.brotate) return; turnplate.brotate =! turnplate.brotate; $ .getjson ( "../ ajax/lottery.ashx", ", function (data) 비정상적, 1092 남은 포인트는 불충분하고, 1093 Unwinned HideInput ( "Code", Data.Code) if (data.code.toString () == "1090") {iosalet ( "System Configuration Errer")} elseif (data.code.toString () = "1091") {iOSELET (user on or monder in or or monder in on or monder in on or monder in on or monder in on or monder in on or monder in grought) } elseif (data.code.tostring () == "1092") {iosalet ( "사용자의 남은 지점 아래") elseif (data.code.toString () == "1094") {iosalet ( "하루의 수준에 따라"} else {var upoint = 0); parseint ( "#spoint"). html (upoint); rotatefn (0, "우승 한 상을 수상한 축하합니다!");위의 코드는 기본 논리를 구현하고 서버에서 전송 된 결과에 응답하기 위해 턴테이블을 돌리는 방법이 필요합니다.
// 턴테이블 항목을 회전시킵니다 : 상금 위치; TXT : 프롬프트; var rotatefn = function (item, txt) {// 전송 된 상품의 수에 따라 해당 라디안을 계산합니다. var angles = item *(360/turnplate.restaraunts.length)-(360/(Turnplate.restaraunts.length *2)); if (각도 <270) {각도 = 270- 각도; } else {각도 = 360- 각도 +270; } // 턴테이블 $ ( '#wheelcanvas'). stopRotate (); // 회전 메소드 계산, 필요한 매개 변수를 설정하고 필요한 매개 변수 및 콜백 함수를 설정합니다. if ($ ( "#code"). val ()! = "1093") {Delayload (gethtttppprefix + "GraphicDetails.html? lukyid =" + $ ( "#code"). val ())}}); };자, 주요 기능 코드가 공유되었으며 일부 도구와 방법은 이해되지 않습니다. 당신은 메시지를 남길 수 있고 추가하겠습니다.
요약
캔버스는 HTML5의 매우 강력한 에이스이며 많은 훌륭한 효과를 얻을 수 있습니다. 이 기사가 캔버스 사용을 배우는 친구들이 도움이되기를 바랍니다.