在下方輸入文字。在圖片上使用鼠標(biāo)右鍵或長按保存
function draw(){ var canvas = document.getElementById("myCanvas"); //獲取Canvas對(duì)象(畫布) var write = document.getElementById("text").value //獲取文本的值 if(canvas.getContext){ //簡單地檢測當(dāng)前瀏覽器是否支持Canvas對(duì)象，以免在一些不支持html5的瀏覽器中提示語法錯(cuò)誤 var ctx = canvas.getContext("2d"); //獲取對(duì)應(yīng)的CanvasRenderingContext2D對(duì)象(畫筆) var img = new Image(); //創(chuàng)建新的圖片對(duì)象 img.src = "images/3.jpg"; //指定圖片的URL img.onload = function(){ //瀏覽器加載圖片完畢后再繪制圖片 ctx.drawImage(img, 0, 0, 300, 245); //以Canvas畫布上的坐標(biāo)(10,10)為起始點(diǎn)，繪制圖像 //圖像的寬度和高度分別縮放到350px和100px ctx.font = "25px 微軟雅黑"; //設(shè)置字體樣式 ctx.fillStyle = "black"; //設(shè)置字體填充顏色 ctx.textAlign = "center"; //設(shè)置文本的水平對(duì)對(duì)齊方式 ctx.fillText(write, canvas.width/2, 35); //從坐標(biāo)點(diǎn)(x,y)開始繪制文字 var myImage = canvas.toDataURL("image/png"); //轉(zhuǎn)化為圖像數(shù)據(jù) var imageElement = document.getElementById("downPic"); //獲取一個(gè)圖像NODE imageElement.src = myImage; }; } } draw(); //進(jìn)頁面時(shí)先繪制一次