怎么旋转文字，用rotate为什么是旋转LOGO？

来源：6-7 完成案例文字图片显示和变换

直鹢

2019-06-05 12:12:42

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.center{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin:0 auto;
width: 1740px;
height: 500px;
margin-top: 100px;
/*margin: 100px 20px 50px 50px;*/
}
.left{
background:rgb(155,153,141);
width: 520px;
height: 500px;
float: left;
}
.text>input{
width: 460px;
height: 40px;
display: block;
margin-bottom: 39px;
margin-left: 33px;
border: none;
border-radius:30px;
outline:none;
font-size: 14px;
text-indent: 2em;
font-weight: bold;
}
.text>input:first-child{
margin-top: 63px;
}
.text>button{
width: 145px;
height:40px;
background:black;
border: none;
border-radius:50px;
color: #fff;
margin-left: 187px;
cursor: pointer;
}
.right{
width: 1220px;
height: 500px;
background:rgb(234,230,206);
float: left;
}
</style>
</head>
<body>
<div class="center">
<div class="left">
<form class="text">
<input type="text" name="" placeholder="姓名">
<input type="text" name="" placeholder="地址">
<input type="text" name="" placeholder="职业">
<input type="text" name="" placeholder="口号">
<button>生成名片</button>
</form>
</div>
<div class="right">
<canvas id="canvas" width="1750px" height="500px">您的游览器不支持</canvas>
</div>
</div>

<script type="text/javascript">
var canvas=document.getElementById('canvas');
ctx=canvas.getContext('2d');
hanzi=canvas.getContext('2d');


ctx.strokeRect(170,130,870,130)
ctx.fillRect(170,130,870,130);
ctx.beginPath();

var img=new Image();
img.src="logo.png"; 
img.onload=function () {
ctx.drawImage(img,0,0,40,40,185,145,100,100);

};
ctx.beginPath();

var str1="请输入姓名";
hanzi.font="35px sans-serif ";
hanzi.fillStyle="#FFF"
hanzi.fillText(str1,300,185);
hanzi.beginPath();

var str2="请输入地址";
hanzi.font="23px sans-serif ";
hanzi.fillStyle="#FFF"
hanzi.fillText(str2,300,215);
hanzi.beginPath();

var str3="请输入职业";
hanzi.font="23px sans-serif ";
hanzi.fillStyle="#FFF"
hanzi.fillText(str3,300,240);
hanzi.beginPath();

var str4="请输入口号";
hanzi.font="23px sans-serif ";
hanzi.fillStyle="#FFF"
hanzi.fillText(str4,735,185);
hanzi.rotate(Math.PI/4);
hanzi.beginPath();
</script>
</body>
</html>

写回答

1回答