이 기사의 예제는 참조를 위해 JS 턴테이블 복권의 특정 코드를 공유합니다. 특정 내용은 다음과 같습니다
1. 기본 효과 달성
2. 주요 내용
• HTML5에서 캔버스 태그 사용
• jQueryRotate.js 회전 플러그인
3. 메인 HTML 코드
<body> <div> <div> <canvas id = "wheelcanvas"> </canvas> <img src = "images/wheel-pointer.png"/> </div> </div> <div> <span id = "tip"> Jason </span> </div> </body> </html>
4. 주요 CSS 코드
.Content {디스플레이 : 블록; 너비 : 95%; 마진 : 30px auto;}. content .wheel {display : block; 너비 : 100%; 위치 : 상대; 배경 이미지 : URL (../ images/wheel-bg.png); 배경 크기 : 100%100%;}. 내용. 너비 : 31.5%; 높이 : 42.5%; 왼쪽 : 34.6%; 상단 : 23%;}. 팁 {Text-Align : Center; 여백 : 20px 0; 글꼴 : 일반 24px 'Microsoft Yahei';}5. 핵심 JS 코드
/ * * 턴테이블 렌더링 * */함수 드로우 휠 칸바 () {// 캔버스 아트보드를 레이어에 해당합니까? ? var canvas = docum너 // jQuery는 DOM 객체가 아닌 랩핑 된 객체를 가져오고 변환 될 수 있습니다. // 각 블록이 차지하는 각도를 계산합니다. Radian System var BaseAngle = Math.pi * 2 / (Turnwheel.RewardNames.Length); // 컨텍스트를 가져옵니다 var ctx = canvas.getContext ( "2d"); var canvasw = canvas.width; // 아트 보드의 높이 var canvash = canvas.height; // 아트 보드의 너비 // 주어진 사각형의 사각형을 지우십시오. ctx.clearrect (0,0, canvasw, canvash); // strokestyle 색상 ctx.strokestyle = "#ffbe04"; // RED // 캔버스 CTX.FONT = '16PX Microsoft Yahei'에서 텍스트 내용의 FONT Current Font 속성; // 시작 위치는 0 ° 각도에서 그려집니다. 즉, 오른쪽의 수평 방향입니다. // (var index = 0; index <turnwheel.rewardnames.length; index ++)에 대한 특정 컨텐츠를 그립니다 {// 현재 각도 var angle = turnwheel.startangle+index * baseangle; // 색상 채우기 ctx.fillStyle = turnwheel.colors [index]; // 콘텐츠 그리기 시작 // ------------------------------------------------ /** iOS* context.arc (x, y, r, sangle, eangle, counterclockwise)에서 Quartz2d와 유사한 아크를 그리십시오. * X : 원 X * Y의 중심점 : 원 X * 산 겔링, eangle : 시작 각도, 끝 각도 * 반 시시 : 옵션, 옵션, false = clocky = counterclockise * */ ctx.arc (Canvasw * 0.5, Canvash * 0.5, Turnwheel.outsideradius, Angle, Owne); ctx.arc (Canvasw * 0.5, Canvash * 0.5, Turnwheel.insideradius, Angle + Baseangle, True); ctx.stroke (); ctx.fill (); // 그래픽 컨텍스트 스택과 유사한 캔버스 상태를 저장합니다. 나중에 상태를 복원 할 수 있습니다 (좌표는 현재 0, 0으로 복원됩니다), ctx.save (); /*---- 상금 콘텐츠를 그립니다 --------*// Red Font Ctx.fillStyle = "#e5302f"; var rewardname = turnwheel.rewardnames [index]; var line_height = 17; // 메소드를 번역하여 캔버스에서 // context.TransLate (x, y)에서 위치를 번역합니다. // ppt 그림, var translatex = canvasw * 0.5 + math.cos (Angle + Baseangle / 2) * Turnwheel.Textradius; var translatey = canvash * 0.5 + math.sin (Angle + Baseangle / 2) * Turnwheel.textradius; ctx.translate (translatex, translatey); // 회전 메소드는 텍스트가 현재 섹터 중심선에 적합하기 때문에 현재 도면을 회전시킵니다! // 각도, 팬 자체의 전류 회전 각도 + BaseAngle / 2 중심선의 각도는 회전 + 수직 각도 90 ° CTX.Rotate (Angle + BaseAngle / 2 + Math.pi / 2); /** 다음 코드는 글꼴, 색상 및 그림 효과와 같은 상 및 상명 길이에 따라 다른 효과를 만듭니다. (실제 상황에 따라 구체적으로 변경) **/ // MeasureText () 캔버스의 메소드는 지정된 글꼴 너비를 포함하는 객체를 픽셀로 반환합니다. // fillText () 메소드는 캔버스에 채워진 텍스트를 그립니다. 텍스트의 기본 색상은 검은 색입니다. FillStyle 속성은 텍스트를 다른 색상/그라디언트/ * * Context.FillText (Text, X, Y, MaxWidth)로 만듭니다. * 메모! ! ! y는 최고 가치가 아니라 텍스트의 맨 아래 값입니다! ! ! * */if (rewardname.indexof ( "m")> 0) {// 필드 트래픽 패킷이 포함되어 있는지 var rewardnames = rewardname.split ( "m"); for (var j = 0; j <rewardnames.length; j ++) {ctx.font = (j == 0)? if (j == 0) {ctx.fillText (rewardNames [j]+"m", -ctx.measuretext (rewardNames [j]+"m"). width / 2, j * line_height); } else {ctx.fillText (RewardNames [j], -ctx.measureText (RewardNames [j]). width / 2, j * line_height); }}} else if (rewardname.indexof ( "m") == -1 && rewardname.length> 6) {// 상금 이름의 길이는 특정 범위 rewardname = rewardname.substring (0,6)+"||"+rewardname.substring (6)을 초과합니다. var rewardnames = rewardname.split ( "||"); for (var j = 0; j <rewardnames.length; }} else {// 캔버스에 컬러 텍스트를 그립니다. 텍스트의 기본 색상은 Black Ctx.fillText (RewardName, -ctx.measureText (RewardName) .width / 2, 0)입니다. } // 해당 아이콘을 추가하면 (rewardname.indexof ( "qcoin")> 0) {// IMG로드가 완료되기 전에 IMGQB.onload = function () {Ctx.DrawImage (imgqb, -15,10); }; Ctx.DrawImage (IMGQB, -15,10); } else if (rewardname.indexof ( "참여해 주셔서 감사합니다")> = 0) {imgsorry.onload = function () {ctx.drawImage (imgsorry, -15,10); }; Ctx.DrawImage (IMGSORRY, -15,10); } // artboard의 상태를 이전 save () state ctx.restore ()로 복원하기 전에 (); /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------.마침내
이것은 iOS의 Quartz2D 기술과 거의 동일합니다 ...
자세한 코드 >>>> 다운로드를 클릭하십시오
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.