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