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

JavaScript014

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()//恢复画布状态

JS代码让文字垂直居中的方法

水平居中方法: 将浏览器可视区的宽度(clientWidth) -减去 要居中元素本身的宽度(offsetWidth) /除以 2 +'px'

垂直居中方法: 将浏览器可视区的高度(clientHeight) -减去 要居中元素本身的高度(offsetHeight) /除以 2 +'px'

window.onload = function() {

var oMain = document.querySelector('#pop-main')

oMain.style.left = (document.documentElement.clientWidth - oMain.offsetWidth) / 2 +'px'

oMain.style.top = (document.documentElement.clientHeight - oMain.offsetHeight) / 2 +'px'

}

js代码

JS即Javascript,Javascript是一种由Netscape的LiveScript发展而来的脚本语言,主要目的是为了解决服务器终端语言,比如Perl,遗留的速度问题。

当时服务端需要对数据进行验证,由于网络速度相当缓慢,只有28.8kbps,验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript,提供了数据验证的基本功能。

1、创建一个名称为   script_text 的html文件 。

2、添加一个 Script 对象引入js文件 设置id为 my_script_id_text,在script加入输出字符串的语句。

3、添加一个button按钮,在点击事件中加入自定义函数 为my_script_text。

4、在javascript中创建一个自定义函数   my_script_text。

5、在自定义函数中获取script对象。用 text属性获取 scripit中的内容,将获取的结果添加到p标签中显示。