· 设置文本的属性
· 填充文本
//画文本
function drawText(canvas,context) {
var selectObj = document.getElementById("foregroundColor");
var index = selectObj.selectedIndex;
var fgColor = 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方法绘制图片
function drawImage(canvas,context) {
var image = new Image();
image.src = "twitterBird.png";
//表示图片加载完成,就执行这个函数
image.onload = function () {
context.drawImage(image,20,120,70,70);
}
}
效果: