HTML5 Canvas描画シールエフェクトのサンプルコードを共有-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5 Canvas描画シールエフェクトのサンプルコードを共有

零下一度

Apr 26, 2017 pm 04:59 PM

HTML5 Canvas を使用してシール効果を描画するサンプルコードを共有しましょう。見てください

<!DOCTYPE html>
<html>
<head>
 <meta charset="gbk">
 <title>HTML5 Canvas画印章</title>
</head>
<body>
    <canvas id="canvas" width="200" height="200"></canvas>
<script>
   var canvas = document.getElementById("canvas");  
   var context = canvas.getContext(&#39;2d&#39;);
   var text = "XXX专用章";
   var companyName = "浙江网络科技股份有限公司";
  
  // 绘制印章边框   
   var width = canvas.width / 2;
   var height = canvas.height / 2;
   context.lineWidth = 5;
   context.strokeStyle = "#f00";
   context.beginPath();
   context.arc(width, height, 90, 0, Math.PI * 2);//宽、高、半径
   context.stroke();

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

    // 绘制印章名称   
    context.font = &#39;20px 宋体&#39;;
    context.textBaseline = &#39;middle&#39;;//设置文本的垂直对齐方式
    context.textAlign = &#39;center&#39;; //设置文本的水平对对齐方式
    context.lineWidth=1;
    context.strokeStyle = &#39;#f00&#39;;
    context.strokeText(text,width,height+60);

    // 绘制印章单位   
    context.translate(width,height);// 平移到此位置,
    context.font = &#39;23px 宋体&#39;
    var  count = companyName.length;// 字数
    var  angle = 4*Math.PI/(3*(count - 1));// 字间角度   
    var chars = companyName.split("");
    var c;
   for (var i = 0; i < count; i++) {
       c = chars[i];// 需要绘制的字符   
       if (i == 0) {
           context.rotate(5 * Math.PI / 6);
       } else{
           context.rotate(angle);
       }
       context.save();
       context.translate(70, 0);// 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
       context.rotate(Math.PI / 2);// 旋转90度,让字平行于x轴
       context.strokeText(c, 0, 0);// 此点为字的中心点
       context.restore();
   }
   //绘制五角星  
    /** 
     * 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上 
     * rotate:绕对称轴旋转rotate弧度 
     */
    function create5star(context, sx, sy, radius, color, rotato) {
        context.save();
        context.fillStyle = color;
        context.translate(sx, sy);//移动坐标原点
        context.rotate(Math.PI + rotato);//旋转
        context.beginPath();//创建路径
        var x = Math.sin(0);
        var y = Math.cos(0);
        var dig = Math.PI / 5 * 4;
        for (var i = 0; i < 5; i++) {//画五角星的五条边
            var x = Math.sin(i * dig);
            var y = Math.cos(i * dig);
            context.lineTo(x * radius, y * radius);
        }
        context.closePath();
        context.stroke();
        context.fill();
        context.restore();
    }
</script>

ログイン後にコピー

<!DOCTYPE html>
<html>
<head>
 <meta charset="gbk">
 <title>HTML5 Canvas画印章</title>
</head>
<body>
    <canvas id="canvas" width="200" height="200"></canvas>


<script>
   var canvas = document.getElementById("canvas");  
   var context = canvas.getContext(&#39;2d&#39;);
   var text = "XXX专用章";
   var companyName = "浙江网络科技股份有限公司";
  
  // 绘制印章边框   
   var width = canvas.width / 2;
   var height = canvas.height / 2;
   context.lineWidth = 5;
   context.strokeStyle = "#f00";
   context.beginPath();
   context.arc(width, height, 90, 0, Math.PI * 2);//宽、高、半径
   context.stroke();

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

    // 绘制印章名称   
    context.font = &#39;20px 宋体&#39;;
    context.textBaseline = &#39;middle&#39;;//设置文本的垂直对齐方式
    context.textAlign = &#39;center&#39;; //设置文本的水平对对齐方式
    context.lineWidth=1;
    context.strokeStyle = &#39;#f00&#39;;
    context.strokeText(text,width,height+60);

    // 绘制印章单位   
    context.translate(width,height);// 平移到此位置,
    context.font = &#39;23px 宋体&#39;
    var  count = companyName.length;// 字数
    var  angle = 4*Math.PI/(3*(count - 1));// 字间角度   
    var chars = companyName.split("");
    var c;
   for (var i = 0; i < count; i++) {
       c = chars[i];// 需要绘制的字符   
       if (i == 0) {
           context.rotate(5 * Math.PI / 6);
       } else{
           context.rotate(angle);
       }
       context.save();
       context.translate(70, 0);// 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
       context.rotate(Math.PI / 2);// 旋转90度,让字平行于x轴
       context.strokeText(c, 0, 0);// 此点为字的中心点
       context.restore();
   }

   //绘制五角星  
    /** 
     * 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上 
     * rotate:绕对称轴旋转rotate弧度 
     */
    function create5star(context, sx, sy, radius, color, rotato) {
        context.save();
        context.fillStyle = color;
        context.translate(sx, sy);//移动坐标原点
        context.rotate(Math.PI + rotato);//旋转
        context.beginPath();//创建路径
        var x = Math.sin(0);
        var y = Math.cos(0);
        var dig = Math.PI / 5 * 4;
        for (var i = 0; i < 5; i++) {//画五角星的五条边
            var x = Math.sin(i * dig);
            var y = Math.cos(i * dig);
            context.lineTo(x * radius, y * radius);
        }
        context.closePath();
        context.stroke();
        context.fill();
        context.restore();
    }
</script>

ログイン後にコピー

以上がHTML5 Canvas描画シールエフェクトのサンプルコードを共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。