최근에 나는 두 가지 재미 데모를 보았습니다. 효과 맵은 다음과 같습니다.
오늘, 나는 주말에 무료로 H5 캔버스를 사용하여 그것을 모방했습니다. 이 기사는 첫 번째 렌더링 만 달성합니다.
이것이 내가 달성 한 효과입니다. 구현 원리구현 원칙은이 책의 기사이며, 여기에는 더 이상 반복되지 않습니다. 이제이 효과를 달성하기 위해 단계별로합시다.
제로로 단계 : 원을 그립니다소스 코드는 다음과 같습니다.
실행 효과는 다음과 같습니다.
<! /head> <body> <canvas id = canvas 너비 = 500 높이 = 500> </canvas> <cript> var canvas = document.getElementById ( 'canvas') var ctx = canvas.getConte XT ( '2d') canvas. 너비 = 500 Canvas.Height = 500 var grid = canvas.width / 4 var cx = canvas.width / 2 // circle settlement x coordinates var cy = canvas.height / 2 / / {ctx.beginpath () ctx.arc (ctx.arc) CX, CY, GRID/2, 0, 2 * MATH.PI)} Circle () CTX.Stroke () </script> </body> </html> </html> </html> </html> < /html> </html> </html> </html> </html> </html>이 데모에는 캔버스의 가장 간단한 사용이 포함됩니다.
1 단계 : 파란색 스티커를 그립니다 ctx.fillText 사용하여 원 중앙에 파란색 포스트를 그립니다. 텍스트는 두껍고 수평입니다.
코드는 다음과 같습니다.
함수 텍스트 (fillStyle) {var fontsize = size / 250 * 120 ctx.font = 'bold' + fontsize + 'px arial'ctx.textalign = 'ctx.fillstyle = fill style ctx.filltext + fontsize * 0.3)} 텍스트 ( '#29a3fe')효과는 다음과 같습니다.
2 단계 : 파란파를 그립니다var wavesize = size / 6 var x = 0 // 물결 모양의 위치 편차, cy + wavesize; 2 차 urveto (CX + 크기 / 4 + X + 크기 / 2, CX + SIZE / 2 + X + SIZE / 2, CY) CTX.QUADRATICCURVETO (CX + SIZE * 3 / 4 + X + SIZE / 2, CY + WAVESIZE, CX + SIZE + X + SIZE / 2, CY) CTX.LINETO (CX + SIZE + X. + SIZE / 2, CANVAS.HEAD) CTX.LINETO (CX -Size + X + Size / 2, Canvas.Height) CTX .LineTo (cx -size + x + size / 2, cy) ctx.closepath ()} ctx .fillstyle = '#29a3fe'curve () ctx.fill ()
효과는 다음과 같습니다.
3 단계 : 흰색 스티커를 그립니다curve () ctx.clip () text ( '#f00')
첫 번째 문장 curve() ctx.clip() 번째 단계와 달리 ctx.fill() 형태의 경로를 만듭니다 (텍스트 포함)는 조정 영역에만 표시 될 수 있습니다.
배경색으로 구별하기 위해 스티커를 빨간색으로 변경했습니다.
효과는 다음과 같습니다.
4 단계 : 스포츠의 파도를 그립니다 function loop () {ctx.clearRect (0, 0, Canvas.Width, Canvas.Height) X -= 1.5 X = 1.5 x = x % 크기 Ctx.Save () CTX.Stroke () ctx.fillStyle = e 'curve () CTX .fill () ctx.ortore () requestAnimationFrame (loop)} loop ()효과는 다음과 같습니다.
5 단계 : 이전 내용을 통합합니다효과는 다음과 같습니다.
6 단계 : 절단 라운드제로에 대한 단계 :
Circle () ctx.stroke ()
변경 :
Circle () ctx.clip ()
이런 식으로, 원형 외부의 모양이 잘린 다음 할 수 있습니다.
마지막으로 전체 소스 코드를 첨부하십시오.
<! ccc;} </style> </head> <body> <canvas id = 캔버스 너비 = 500 높이 = 500 높이 = 500> </canvas> <cript> var canvas = document.getElementById ( 'canvas') var ctx = canvas.getContext ( '2d') canvas.width = 500 canvas.height = 500 var size = canvas.width / 4 // 원의 크기 var cx = canvas.width / 2 // Center Point X는 var cy = canvas를 좌표합니다. Heigh / Height / 2 // Circle Center Point Y 좌표 var wavesize = size / 6 // wave size var x = 0 // wave 위치 오프셋 기능 circle () {ctx.beginpath () ctx.arc (cx, cy, size / 2, 0, 2 * math.pi)} 함수 curve () {ctx.beginpath () ctx.moveto (cx -size + x + size / 2, cy) ctx.quadraticcurveto (cx -size + size / 4 + x + x + size / 2, cy -wavesize, cx -size + size + size / 2 + x + size / 2, cy) ctx.quadraticcurveto (cx -size + size * 3 / 4 + x + size / 2, cy + Wavesize, CX -Size + Size + X + Size / 2, Cy) CTX.QuadraticCurveto (CX + SIZE / 4 + X + SIZE / 2, CY -WAVESIZE, CX + SIZE / 2 + X + SIZE / 2, CY) to (to (to (to Cx + size * 3 / 4 + x + size / 2, cy + wavesize, cx + size + x + size / 2, cy) ctx.lineto (cx + size + x + size / 2, Canvas.Height) CTX. var fontsize = size = size = size e / 250 * 120 ctx.font = 'bold' + fontsize + 'px arial'ctx.textalign = 'center'ctx.fillstyle = fillstyle ctx.filltext ( 'post', cx, cy + fontsize * 0.3)} 함수 루프 () {ctx.clearRect (0, 0, 캔버스, 캔버스, 캔버스. 하이이트) x -= 1.5 x = x % size ctx.save () ctx.clip () 텍스트 ( '#29A3fe ') ctx.fillstyle =' #29a3fe 'ctx.fill () ctx.fill () ctx.clip () text ('#fff ') ctx.restnimationframe (loip (loop)} loop () </body> </ HTML " 요약위의 내용은이 기사의 내용이 모든 사람의 학습이나 작업에 도움이되기를 바랍니다.