HTML5之帆布（canvas）（五）

绘制文本

·设置文本的属性

·填充文本

//画文本

functiondrawText(canvas,context) {

varselectObj =document.getElementById("foregroundColor");

varindex = selectObj.selectedIndex;

varfgColor = selectObj[index].value;

context.fillStyle = fgColor;//设置字体颜色

context.font ="bold 1em sans-serif";//设置字体

context.textAlign ="left";//设置对齐方式

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);

}

绘制图片

·首先，创建一个JavaScript图片对象

·设置这个图像对象的图片来源地址

·调用的drawImage方法绘制图片

functiondrawImage(canvas,context) {

varimage =newImage();

image.src ="twitterBird.png";

//表示图片加载完成，就执行这个函数

image.onload =function() {

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

}

}

效果：