canvas来绘制一个公章的效果代码-html代码-BFW代码库

canvas来绘制一个公章的效果代码

代码语言：html

所属分类：其他

代码描述：canvas来绘制一个公章的效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>



</head>
<body>
    <div>
        <label for="stamp">公司名称</label><input type="text" id="stamp" />
        <br />
        <label for="stamp">下面的小字</label><input type="text" id="small" />
        <br />
        <button id="btn">生成</button>
    </div>
    <canvas id="canvas" width="250" height="250"></canvas>
    <script type="application/javascript">
        //<![CDATA[
        function createSeal(id, company, name) {

            var canvas = document.getElementById(id);
            var context = canvas.getContext('2d');

            // 绘制印章边框
            var width = canvas.width/2;
            var height = canvas.height/2;
            context.lineWidth = 7;
            context.strokeStyle = "#f00";
            context.beginPath();
            context.arc(width, height, 110, 0, Math.PI*2);
            context.stroke();

            //画五角星
            create5star(context, width, height, 30, "#f00", 0);

            // 绘制印章名称
            context.font = '22px Helvetica';
            context.textBaseline = 'middle'; //设置文本的垂直对齐方式
            context.textAlign = 'center'; //设置文本的水平对对齐方式
            context.lineWidth = 1;
            context.fillStyle = '#f00';
            context.fillText(name, width, height+65);

            // 绘制印章单位
            context.translate(width, height); // 平移到此位置,
            context.font = '30px Helvetica'
            var count = company.length; // 字数
            var angle = 4*Math.PI/(3*(count - 1)); // 字间角度
            var chars = company.split("");
            var c;
            for (var i = 0; i < count; i++) {
                c = chars[i]; // 需要绘制的字符
                if (i == 0)
                    context.rotate(5*Math.PI/6);
                else
                  .........完整代码请登录后点击上方下载按钮下载查看