HTML5/ Javascript Canvas 邮票设计项目

Question

我正在做 HTML5/js Canvas 关于在线设计的项目 Stamps.I 必须设计一个圆形图章，它由顶部圆形文本和底部圆形文本以及中心他们一张图片..（你可以参考屏幕截图）。对于这两个文本，我设置了 2 个不同的文本 boxes.But 我没有得到想要的输出文本重叠每个 other.please 纠正我哪里出错了..我附上截图。

  <canvas id="canvas1" width="600" height="400"></canvas>
  Text-top:
  <input type="text" id="text_cnv" size="40" maxlength="" />
  Text-bottom:
  <input type="text" id="text_cnv2" size="40" maxlength="" />

  <script>
  var ctx = document.getElementById('canvas1').getContext('2d');

  var r = 99;
  var space = Math.PI / 12;

  ctx.font = "bold 30px Courier";
  document.getElementById('text_cnv').onkeyup = function() {
  textCircle(this.value,150,150,r,space,1);
  }
  document.getElementById('text_cnv2').onkeyup = function() {
  textCircle(this.value,150,150,r,space);
  }
  function textCircle(text,x,y,radius,space,top){
  space = space || 0;
  var numRadsPerLetter = (Math.PI - space * 2) / text.length;
  ctx.save();
  ctx.translate(x,y);
  var k = (top) ? 1 : -1; 
  ctx.rotate(-k * ((Math.PI - numRadsPerLetter) / 2 - space));
  for(var i=0;i<text.length;i++){
  ctx.save();
  ctx.rotate(k*i*(numRadsPerLetter));
  ctx.textAlign = "left";
  ctx.textBaseline = (!top) ? "top" : "bottom";
  ctx.fillText(text[i],0,-k*(radius));
  ctx.restore();
  }
  ctx.restore();
}

 ctx.beginPath();
 ctx.arc(150, 150, r, 0, Math.PI * 2, false);
 ctx.closePath();
 ctx.fillStyle = "blue";
 </script>
 </body>

Answer 1

您需要在每次 textCircle 调用时清除 ctx。

只需在textCircle函数中添加ctx.clearRect ( 0 , (top?0:y) , 600, y);即可。

function textCircle(text,x,y,radius,space,top){
    ctx.clearRect ( 0 , (top?0:y) , 600, y);
    space = space || 0;

JSFiddle

HTML5/ Javascript Canvas 邮票设计项目

HTML5/ Javascript Canvas stamp design project

javascript

css

php

html5-canvas