繪制文本

·設(shè)置文本的屬性

·填充文本

//畫文本

functiondrawText(canvas,context) {

varselectObj =document.getElementById("foregroundColor");

varindex = selectObj.selectedIndex;

varfgColor = selectObj[index].value;

context.fillStyle = fgColor;//設(shè)置字體顏色

context.font ="bold 1em sans-serif";//設(shè)置字體

context.textAlign ="left";//設(shè)置對齊方式

context.fillText("I saw this tweet",20,40);//填充文本

context.font ="bold 1em sans-serif";

context.textAlign ="right";

context.fillText("and I got was this lousy t-shirt!",canvas.width-20,canvas.height-40);

}

繪制圖片

·首先，創(chuàng)建一個JavaScript圖片對象

·設(shè)置這個圖像對象的圖片來源地址

·調(diào)用的drawImage方法繪制圖片

functiondrawImage(canvas,context) {

varimage =newImage();

image.src ="twitterBird.png";

//表示圖片加載完成，就執(zhí)行這個函數(shù)

image.onload =function() {

context.drawImage(image,20,120,70,70);

}

}

效果：