是这样写么，感觉写得很繁琐吶。。
来源：6-7 完成案例文字图片显示和变换
KD_35
2018-04-23 13:24:09
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas图片</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
margin-top: 200px;
margin-left: 100px;
}
.left{
float: left;
width: 300px;
height: 200px;
background-color: pink;
text-align: center;
padding-top: 100px;
}
.left input{
width: 200px;
height: 20px;
border-radius: 5px;
outline: none;
border: 1px solid black;
margin-bottom: 10px;
}
canvas{background-color:lightblue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">
<form>
<input type="text" name="" class="myname" placeholder="姓名">
<input type="text" name="" class="address" placeholder="地址">
<input type="text" name="" class="profession" placeholder="职业">
<input type="text" name="" class="slogan" placeholder="口号">
<input type="button" name="" value="生成名片" id="submit">
</form>
</div>
<canvas id="canvas" width="600px" height="300px">您的浏览器不支持canvas
</canvas>
</div>
<script>
var button=document.getElementById('submit'),
list=document.getElementsByTagName('input'),
myname=list[0],
address=list[1],
profession=list[2],
slogan=list[3];
var str="请输入姓名",str1='请输入地址',str2="请输入职业",str3="请输入口号";
button.onclick=function(){
clearCanvas();
str=myname.value;
str1=address.value;
str2=profession.value;
str3=slogan.value;
str==""?str="请输入姓名":str=myname.value;
str1==""?str1="请输入地址":str1=address.value;
str2==""?str2="请输入职业":str2=profession.value;
str3==""?str3="请输入口号":str3=slogan.value;
upload(str,str1,str2,str3);
}
var upload=function(str,str1,str2,str3){
var canvas=document.getElementById('canvas'),
context=canvas.getContext('2d');
context.save();
var linearGradient=context.createLinearGradient(100,180,500,180);
var distancex=context.measureText(str).width*Math.sqrt(3)/2,
distancey=context.measureText(str).width/2;
linearGradient.addColorStop(0,'rgba(0,0,0,1)');
linearGradient.addColorStop(.5,'rgba(0,0,0,1)');
linearGradient.addColorStop(1,'rgba(0,0,0,.2)');
context.fillStyle=linearGradient;
context.fillRect(100,100,400,100);
context.beginPath();
var img=new Image();
img.src='http://climg.mukewang.com/59859f4d00014f1503000100.jpg';
img.onload=function(){
context.drawImage(img,20,0,90,100,100,100,100,100);
}
context.beginPath();
context.font="25px 黑体";
context.fillStyle="#fff";
context.textBaseline="top";
context.fillText(str,210,110);
context.beginPath();
context.font="16px 黑体";
context.fillText(str1,210,150);
context.beginPath();
context.fillText(str2,210,180);
context.beginPath();
context.rotate(-Math.PI/6);
context.fillText(str3,200+distancex,280+distancey);//
context.restore();
}
upload(str,str1,str2,str3);
function clearCanvas(){
var canvas=document.getElementById('canvas'),
context=canvas.getContext('2d');
context.clearRect(0,0,canvas.width,canvas.height);
}
//此处填充代码
</script>
</body>
</html>写回答
1回答
-
怎么都被占用了呢
2018-04-23
经测试，效果是实现了的。在课程源码中有这个案例的代码，可以下载下来参考着优化一下自己的效果。
0
相似问题