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

JavaScript040

js中怎么让canvas文字竖着显示,第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()//恢复画布状态

1/6

第一步，双击打开HBuilder编辑工具，新建一个静态页面dy.html，使用默认的HTML5模板，

2/6

第二步，在<body></body>主体节点添加一个<div></div>标签，并添加div标签id属性

3/6

第三步，在标题标签下方添加一个<script></script>，并使用window.onload初始化，调用毙斤方法创建一个label标签元素节点

4/6

第四步，接着再次调用JavaScript中的方法createTextNode创建文本节点

5/6

第五步，保存代码并在浏览器中预览效果，可以发现显示一个文字内容

6/6

第六步，最后打开浏览器控制台，查看界面源代码，可以看到创建后的代码