封裝一個canvas畫對話氣泡的函數
阿新 • • 發佈：2019-05-02
type ref text per cti 分享圖片 str () wing
quadraticCurveTo(cp1x, cp1y, x, y)
繪制二次貝塞爾曲線，cp1x,cp1y為一個控制點，x,y為結束點。開始點由moveTo,或者前面一次的結束點作為下次調用的開始點.
文檔參考二次貝塞爾曲線及三次貝塞爾曲線
藍色的為起始/結束點,紅色的為控制點.
後來發現不好看,調整了參數比例.
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style> #test-canvas { border: 1px solid black; } </style> <script> // 封裝一個畫對話氣泡的函數 function drawBubble(ctx, x, y, w, h) { //左上角點(x,y) 整體寬高(w,h) ctx.beginPath(); ctx.moveTo(x, y + 0.35 * h); ctx.quadraticCurveTo(x + 0.04 * w, y + 0.02 * h, x + 0.5 * w, y); ctx.quadraticCurveTo(x + 0.96 * w, y + 0.02 * h, x + w, y + 0.35 * h); ctx.quadraticCurveTo(x + w, y + 0.7 * h, x + 0.58 * w, y + 0.72 * h); ctx.quadraticCurveTo(x + 0.5 * w, y + 0.9 * h, x + 0.2 * w, y + h); ctx.quadraticCurveTo(x + 0.38 * w, y + 0.80 * h, x + 0.38 * w, y + 0.72 * h); ctx.quadraticCurveTo(x, y + 0.70 * h, x, y + 0.35 * h); ctx.stroke(); } function draw() { var canvas = document.getElementById('test-canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); drawBubble(ctx,10,10,100,100); drawBubble(ctx,110,10,50,50); ctx.strokeStyle="#ff0000"; drawBubble(ctx,110,60,50,50); } } </script> </head> <body onload="draw()"> <canvas id="test-canvas" width="600" height="400"> <p>您的瀏覽器不支持canvas</p> </canvas> </body> </html>
封裝一個canvas畫對話氣泡的函數