用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;}

</style>

</head>

<body>

</body>

var canvas=document.getElementById("canvas");

var context=canvas.getContext("2d");

var image=new Image();

window.onload=function(){

canvas.width=800

canvas.height=800

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

image.onload=function(){

context.drawImage(image,0,0)

// context.drawImage(image,600,200,400,400,200,200,400,400)

}

context.font = "Bold 20px Arial";

// 设置对齐方式

context.textAlign = "left";

// 设置填充颜色

context.fillStyle = "#008600";

// 设置字体内容，以及在画布上的位置

context.fillText("Hello!", 10, 50);

// 绘制空心字

context.strokeText("Hello!", 10, 100);

}

</script>

</html>

sdwsq

浏览 6722回答 2

2回答

qq_SL_2

处理方式：可以把显示文字的代码放入图片显示代码之下image.onload=function(){ 图片显示代码; 文字显示代码; }原因：图片是在onload完成后再进行绘制，如果文字绘制不放置在onload图片处理之下就不能保证文字绘制代码已经执行而图片才加载

狂飙的蜗牛_1

canvas和PS里面的图层比较像，你先绘制图片再绘制文字就可以了，越往后面绘制的图形越处于最外层

随时随地看视频慕课网APP

用canvas怎么让图片在位子的下面 一加图片文字就看不到了（有例子最佳）

2回答

用canvas怎么让图片在位子的下面一加图片文字就看不到了（有例子最佳）