亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

用canvas怎么讓圖片在位子的下面 一加圖片文字就看不到了(有例子最佳)

用canvas怎么讓圖片在位子的下面 一加圖片文字就看不到了(有例子最佳)

sdwsq 2016-11-15 16:33:12
<!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
  • 2 回答
  • 0 關注
  • 6796 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號