·设置文本的属性
·填充文本
//画文本
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);
}
}
效果：
