[英]manipulate text with html5 canvas
Hello I want to draw the logo of Chelsea Football Club and I have got already the 'big things' like the circle and the innerwhite space etc.. and the text but there is where I got a problem with.. in the logo the text is like in a halve circle shape but I can't find a way to draw it like this in canvas for an example for the right text see image below and see also my code 您好,我想绘制切尔西足球俱乐部的徽标,并且我已经有了“大东西”,例如圆圈和内部空白等。以及文字,但是徽标中确实存在问题。就像是半圆形状,但是我找不到在画布上像这样绘制它的方法,以作为正确文本的示例,请参见下面的图片,也请参见我的代码
$(function () {
//variables
var canvas = document.getElementById("chelseaLogo");
var CanvasContext = canvas.getContext("2d");
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 170;
var radiusWhite = radius - 30;
// outside logo
CanvasContext.beginPath();
CanvasContext.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
CanvasContext.fillStyle = '#0B49DB';
CanvasContext.fill();
//stroke
CanvasContext.lineWidth = 2;
CanvasContext.strokeStyle = '#FFF700';
CanvasContext.stroke();
//white innercircle
CanvasContext.beginPath();
CanvasContext.arc(centerX, centerY, radiusWhite, 0, 2 * Math.PI, false);
CanvasContext.fillStyle = '#fff';
CanvasContext.fill();
//text top
CanvasContext.font = '15pt Calibri';
CanvasContext.fillText('Chelsea', 155, 25);
//text bottom
CanvasContext.font = '15pt Calibri';
CanvasContext.fillText('Football Club', 140, 330);
});
I've modified the tutorial code that @Esailija posted to be a bit more accurate/flexible: 我修改了@Esailija发布的教程代码,使其更加准确/灵活:
function drawTextAlongArc(context, str, hei, centerX, centerY, radius, angle, above) {
var met, wid;
context.save();
context.translate(centerX, centerY);
if (!above) {
radius = -radius;
angle = -angle;
}
else{
hei = 0;
}
context.rotate(-1 * angle / 2);
context.rotate(-1 * (angle / str.length) / 2);
for (var n = 0; n < str.length; n++) {
var char = str[n];
met = context.measureText(char);
wid = met.width;
console.log(met);
context.rotate(angle / str.length);
context.fillText(char, -wid / 2, -radius + hei);
context.strokeText(char, -wid / 2, -radius + hei);
}
context.restore();
}
ctx.font = 'bold 40pt impact';
ctx.fillStyle = '#000';
ctx.strokeStyle = '#f00';
ctx.lineWidth = 2;
drawTextAlongArc(ctx, "CHELSEA", 40, 200, 200, 100, Math.PI*3/5, true);
ctx.font = 'bold 20pt impact';
drawTextAlongArc(ctx, "FOOTBALL CLUB", 30, 200, 200, 100, Math.PI*3/5, false);
ctx.beginPath();
ctx.arc(200,200,100,0,Math.PI*2,false);
ctx.stroke();
You can see an example of this here: http://jsfiddle.net/6uQSS/1/ 您可以在这里看到一个示例: http : //jsfiddle.net/6uQSS/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.