Question

我正在使用HTML Canvas，我需要创建此电子邮件按钮：http://i.imgur.com/fckssfE.png。

我首先开始创建一个走投无路的矩形，但我花了2个小时，我没有得到enywhere。我在博客，Youtube，网站上搜索教程和示例，但我没有找到任何真正有用的按钮。

以下是我正在处理的代码：

<canvas id="canvas" width="500px" height="500px" style="border: solid 1px silver;">
</canvas>

<script>
    $(document).ready(function () {
        var canvas = $('#canvas');
        var context = canvas.get(0).getContext('2d');

        /*
        ctx.beginPath();
        ctx.moveTo(100, 100);
        ctx.arcTo(0, 100, 0, 0, 30);
        ctx.arcTo(0, 0, 100, 0, 30);
        ctx.arcTo(100, 0, 100, 100, 30);
        ctx.arcTo(100, 100, 0, 100, 30);
        ctx.stroke();
        */

        var rectX = 100;
        var rectY = 175;
        var rectWidth = 300;
        var rectHeight = 150; //125
        var cornerRadius = 125;

        context.lineJoin = 'round';
        context.lineWidth = 4;

        context.strokeRect(rectX + (cornerRadius / 2), rectY + (cornerRadius / 2), rectWidth - cornerRadius, rectHeight - cornerRadius);
    });
</script>

任何人都可以帮我使用这个按钮，或者只是指向我制作Canvas图像的正确方向。

感谢您的回答！

HTML Canvas电子邮件按钮从头开始

0 个答案: