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

    }

}

效果：