HTML5 / Javascript Canvas邮票设计项目
格伦麦克斯
我正在研究有关设计在线图章的HTML5 / js Canvas项目。我必须在Circle中设计一个图章，该图章由顶部的圆形文本和底部的圆形文本以及它们的中心一个图像组成..（可以参考ScreenShot）。这两个文本我都设置了2个不同的文本框。但是我没有得到想要的输出文本彼此重叠。请更正我哪里出错了。
<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>
李爱德
您需要ctx在每次textCircle通话时清除。
只需添加ctx.clearRect ( 0 , (top?0:y) , 600, y);的textCircle功能。
function textCircle(text,x,y,radius,space,top){
ctx.clearRect ( 0 , (top?0:y) , 600, y);
space = space || 0;
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
HTML5 canvas javascript
- 2
HTML5 canvas javascript
- 3
Javascript和HTML5 Canvas Sprite
- 4
HTML5 canvas + JavaScript class =错误
- 5
html5 canvas和javascript的奇怪行为
- 6
如何使用JavaScript在HTML5 Canvas中绘制圆？
- 7
使用JavaScript克隆并单击移动的HTML5 Canvas元素
- 8
Netbeans 8.1 HTML5 / JavaScript项目类型
- 9
Netbeans 8.1 HTML5 / JavaScript项目类型
- 10
HTML5 Javascript画笔
- 11
HTML5 JavaScript画笔
- 12
HTML5 Javascript画笔
- 13
在HTML5 canvas中，translate（）和moveTo（）JavaScript函数之间有什么区别？
- 14
Javascript HTML5 Canvas Mario Bros NES克隆，碰撞和跳跃中断
- 15
html5 canvas应用程序中的JavaScript base64图像源内存管理
- 16
How can I animate an image to spin inside an HTML5 canvas with JavaScript?
- 17
使用JavaScript添加到正文时，HTML5 Canvas会重置
- 18
使用HTML5 canvas和Javascript显示多帧dicom图像
- 19
HTML5：通过JavaScript绘制后将透明度应用于Canvas
- 20
使用JavaScript三角函数缩放旋转的图像以填充HTML5 Canvas？
- 21
将HTML5 Canvas + Javascript应用程序转换为可执行文件
- 22
如何在javascript中获取HTML5 Canvas.todataurl文件大小？
- 23
HTML5 Canvas不会在Rails中使用JavaScript进行迭代
- 24
Javascript，Html5 Canvas渲染一次后，对其进行更新
- 25
裁剪HTML5 Canvas / JavaScript后，如何从图像中删除透明空白？
- 26
Visual Studio 2013中的JavaScript HTML5 CSS3项目模板
- 27
是HTML5 = HTML + CSS + Javascript
- 28
HTML5验证：willValidate的JavaScript怪异
- 29
HTMLcode中的HTML5和JavaScript
我来说两句