zoukankan      html  css  js  c++  java
  • 封装一个canvas画对话气泡的函数

    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>
    
  • 相关阅读:
    GPU
    Windows系统之hosts文件
    条形码定位算法
    entity framework extended library , bulk execute,deleting and updating ,opensource
    sharepoint 2013 sp1
    windows azure programing
    windows azure tools for mac
    online web design tool
    toastr
    sharepoint online
  • 原文地址:https://www.cnblogs.com/ShawSpring/p/10801284.html
Copyright © 2011-2022 走看看