HTML5之帆布（canvas）（五）

绘制文本

· 设置文本的属性

· 填充文本

//画文本

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

    }

}

效果：