（急求在线等）怎么办这个canvas转换为图片

首页课程实战体系课手记专栏慕课教程

（急求在线等）怎么办这个canvas转换为图片

<!DOCTYPE html>

<html>

<head>

<style>

@font-face {

font-family:"sor";

src:url('fonts/FZZBHFW.TTF');

}

@font-face {

font-family:"sy";

src:url('fonts/gangbixingshu.TTF');

}

body{margin: 0; padding: 0; font-family:"sy";}

#canvas{display: block; margin: 0 auto; font-family: "sy";}

.bu{border: none; padding: 10px;display: block;margin: 0 auto;}

#bt1,#bt2,#bt3{height: 30px;display: block;margin: 10px;margin: 10px auto;width: 200px;}

#bt3{height: 300px;}

</style>

</head>

<body>

</body>

function draw() {

var c=document.getElementById("canvas")

var ctx = c.getContext('2d');

var img = new Image();

var bt1=document.getElementById("bt1").value;

var bt2=document.getElementById("bt2").value;

var bt3=document.getElementById("bt3").value;

ctx.clearRect(0,0,800,800)

img.onload = function(){

ctx.drawImage(img,0,0,800,800);

ctx.beginPath();

var biaoti=bt1

var bw=(biaoti.length)*60/2;

ctx.fillStyle = '#FFFFFF';

ctx.font = "60px sy";

ctx.textBaseline = 'top';

ctx.fillText(biaoti, 800/2-bw, 5);

var biaoti1=bt2

ctx.fillStyle = '#FFFFFF';

ctx.font = "30px sy";

ctx.textBaseline = 'top';

ctx.fillText(biaoti1, (800/2-bw)+30, 70);

var biaoti2=bt3

// var bw=(biaoti2.length)*30/2;

// var bww=(biaoti2.length)*30;

var linewidth=0;

var inneheight= 100 //距离顶部距离

var lastSubStrIndex=0;

for(var i=0; i<biaoti2.length; i++){

linewidth+=ctx.measureText(biaoti2[i]).width;

if(linewidth>800-50){

ctx.fillText(biaoti2.substring(lastSubStrIndex,i),0,inneheight);

inneheight+=40;

linewidth=0;

lastSubStrIndex=i;

}

if(i==biaoti2.length-1){

ctx.fillText(biaoti2.substring(lastSubStrIndex,i+1),0,inneheight)

}

img.src ="img/1-5.jpg";

}

</script>

</html>

sdwsq

浏览 1662回答 1

1回答

Lemon156

可以在浏览器上保存为图片

0 0

随时随地看视频慕课网APP

（急求在线等） 怎么办这个canvas转换为图片

1回答

（急求在线等）怎么办这个canvas转换为图片