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

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" /> <title></title> <script type="text/javascript" src="js/jquery.js" ></script> <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> <canvas id="canvas"></canvas> </body> <script type="text/javascript"> 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>

查看完整描述

2 回答

qq_SL_2

TA贡献1条经验获得超2个赞

处理方式：

可以把显示文字的代码放入图片显示代码之下

image.onload=function(){
    图片显示代码;
    文字显示代码;
}

原因：

图片是在onload完成后再进行绘制，如果文字绘制不放置在onload图片处理之下就不能保证文字绘制代码已经执行而图片才加载

2 反对回复 2017-01-06

狂飙的蜗牛_1

TA贡献96条经验获得超43个赞

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

反对回复 2016-11-15

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

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

2 回答

相关问题推荐

添加回答

热搜

最近搜索清空

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

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

2 回答

相关问题推荐

添加回答

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

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