Question

js中怎么让canvas文字竖着显示

js中怎么让canvas文字竖着显示. 如果用旋转（rotate）的会导致其他不是字体也跟着旋转了。求代码

Answer 1

步骤：

1、保存画布状态

2、旋转画布

3、绘制文字

4、画布恢复原来状态

代码：

 function drawBowtie(ctx, fillStyle) { 
    ctx.fillStyle = "rgba(200,200,200,0.3)"; 
    ctx.fillRect(-30, -30, 60, 60); 
    ctx.fillStyle = fillStyle; 
    ctx.globalAlpha = 1.0; 
    ctx.beginPath(); 
    ctx.moveTo(25, 25); 
    ctx.lineTo(-25, -25); 
    ctx.lineTo(25, -25); 
    ctx.lineTo(-25, 25); 
    ctx.closePath(); 
    ctx.strokeText("2012",-15,5);
    ctx.fill(); 
    
}
function dot(ctx) { 
    ctx.save(); 
    ctx.fillStyle = "black"; 
    ctx.fillRect(-2, -2, 4, 4); 
    ctx.restore(); 
} 
 var ctx = document.getElementByIdx_x('myCanvas').getContext("2d"); 
 ctx.save(); //保存画布状态
 ctx.translate(100, 100); 
 ctx.rotate(90 * Math.PI / 180); //选择画布
 drawBowtie(ctx, "yellow"); //绘制文字
 dot(ctx); 
 ctx.restore();//恢复画布状态

Answer 2

一般考虑分层，需要旋转跟不需要的分开canvas来显示，这样控制方便些。

Answer 3

font-family:@楷体_gb2312
就这一段，加进去就OK。

追问

我去 我不知道往哪加啊？怎么加？

追答

放进样式表里面啊
也就是对应的css文件

Answer 4

font-family:@楷体_gb2312

追问

可以用canvas 写个小例子吗？