簡單的 canvas 翻角效果
阿新 • • 發佈：2018-01-09
狀態 返回 math hid key cde 圖形 -s ria
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style> .container:before { content:""; position: absolute; left: 50px; top: 0; width: 1px; height: 102px; background: #fff; } .container:after { content: ""; position: absolute; left: 0px; top: 50px; width: 102px; height: 1px; background: #fff; } .container { background: #abcdef; display: inline-block; font-size: 0; position: relative; } </style> </head> <body> <div class="container"> <canvas class="myCanvas" width="100" height="100"></canvas> </div> <script> var canvas = document.querySelector(‘.myCanvas‘); //獲取canvas對應dom // var ctx = canvas.getContext(‘2d‘); //此方法較為基礎 , 意為獲取canvas繪畫2d內容的工具(上下文) // var cw = 100; //分辨率 , 其實直接從dom上獲取可能更好些 // var ch = 100; //分辨率 , 其實直接從dom上獲取可能更好些 //API //保存上下文狀態 (比如畫筆尺寸 顏色 旋轉角度) // ctx.save() //返回上次保存的上下文狀態 //ctx.restore() //上下文移動到具體位置 //ctx.moveTo(x,y) //上下文以劃線的形式移動到某位置 //ctx.lineTo(x,y) // 畫線動作 //ctx.stroke() //上下文(畫筆)按貝塞爾曲線移動(簡單理解為可控的曲線即可) //ctx.quadraticCurveTo() //畫圓 //ctx.arc() //開啟新的畫筆路徑 //ctx.beginPath() //關閉當前畫筆路徑 //ctx.closePath() //創建canvas漸變對象 //ctx.createLinearGradient() //對閉合區域進行填充 //ctx.fill() //畫筆的重疊模式 //ctx.globalCompositeOperation /** 首先是繪制黑色翻出的部分 , 圖形分解為如下幾部分(請根據上圖腦補) 左上角向右下的半弧 ╮ 然後是豎直向下的豎線 | 然後是向右的半圓 ╰ 再然後是向右的橫線 接著還是向右下的半弧 ╮ 最後是將線連接會起點 **/ var canvas = document.querySelector(‘.myCanvas‘); var ctx = canvas.getContext(‘2d‘); var cw = 100; var ch = 100; var percent = 0; var points = { x1 : 100, y1 : 0, x2 : 100, y2 : 0 } var speed = 1; var aSpeed = 0.1; ctx.moveTo(0,0); ctx.strokeStyle = ‘black‘; ctx.strokeWidth= 1; ctx.save(); var deg = Math.PI / 180; function start(type){ if(type === ‘show‘){ points = { x1 : 100, y1 : 0, x2 : 100, y2 : 0 } aSpeed = .1; speed = 1; }else{ points = { x1 : 50, y1 : 0, x2 : 100, y2 : 50 } aSpeed = -.1; speed = -1; } draw(points , type); } function draw(points , type){ var disX = Math.floor(points.x2 - points.x1); var disY = Math.floor(points.y2 - points.y1); if(disY < 0 && type == ‘hide‘){ // console.log(‘改展開動畫了‘); ctx.clearRect(0,0,cw,ch); setTimeout(function(){ start(‘show‘); } , 2000) return ; }else if(disY > 50 && type == ‘show‘){ // console.log(‘改收起動畫了‘); setTimeout(function(){ start(‘hide‘); } , 2000) return ; } ctx.clearRect(0,0,cw,ch); drawPageCorShow(points , disX , disY); drawPageCor(points, disX , disY); window.requestAnimationFrame(function(){ draw(points , type); }) } function drawPageCorShow(points, disX , disY){ ctx.save(); ctx.beginPath(); //閉合三角形 ctx.moveTo(points.x1 , points.y1); ctx.lineTo(points.x2 , points.y2); ctx.lineTo(points.x2 , points.y1); ctx.lineTo(points.x1 , points.y1); ctx.closePath(); ctx.strokeStyle = "#080"; ctx.stroke(); ctx.fillStyle = ‘#ff6600‘; ctx.fill(); //重疊模式 ctx.globalCompositeOperation = ‘source-atop‘; ctx.beginPath(); ctx.font = ‘14px Arial‘; ctx.textAlign = ‘center‘; ctx.translate(78 , 22); ctx.rotate(45 * deg); ctx.fillStyle = ‘#fff‘; ctx.fillText(‘NEW‘ , 0 , 0); ctx.closePath(); ctx.restore(); } function drawPageCor(points, disX , disY){ ctx.save(); ctx.beginPath(); //移動到位置 左上 ctx.moveTo(points.x1,points.y1); //畫第一個曲線 ctx.quadraticCurveTo(points.x1 + (disX/10),points.y1 + disY/10 ,(points.x1 + disX/10),points.y1 + disY/2); //直線向下 ctx.lineTo(points.x1 + disX / 10 , points.y2 - (disY/5)); //半圓向右 ctx.arc(points.x1+disX/5,points.y2 - (disY/5),disY/10,deg*180 , deg*90,true); // 直線向右 ctx.lineTo(points.x2 - disX/2 , points.y2 - (disY / 10)) //曲線向右 ctx.quadraticCurveTo(points.x2 -disX/10,points.y2 - (disY/10) ,points.x2,points.y2 ); //閉合圖形 ctx.lineTo(points.x1,points.y1); ctx.closePath(); var gradient = ctx.createLinearGradient(points.x1 , points.y2 , points.x1 + (disX/2) , points.y1 + disY/2); gradient.addColorStop(0 , ‘#ccc‘); gradient.addColorStop(0.7 , ‘#111‘); gradient.addColorStop(1 , ‘#000‘); ctx.fillStyle = gradient; ctx.fill(); ctx.restore(); //更新速度位置 points.x1 -= speed; points.y2 += speed; speed += aSpeed; } start(‘show‘); </script> </body> </html>
原文地址：http://web.jobbole.com/93229/
簡單的 canvas 翻角效果