HTML5_Canvas(2)

context.drawImage(imageObj,destX,destY);

//为某个画布贴上图片

 

例子：

window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    var destX = 69;
    var destY = 50;
 
    var imageObj = new Image();
    imageObj.onload = function(){
        context.drawImage(imageObj, destX, destY);
    };
    imageObj.src = "darth-vader.jpg";
};

 

context.drawImage(imageObj,destX,destY,destWidth,destHeight);

//同上，在某个矩形框内显示图片，原始图片等比缩放

context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);

//截取原始图片的一个部分在矩形框内显示

context.font=[value];

//文字字体，例子：

context.font = "40pt Calibri";

context.fillStyle=[value];

//文字颜色

context.strokeStyle=[value];

context.strokeText("Hello World!", x, y);

//文字样式

context.textAlign=[value];

//文字显示在左边，中间还是右边

context.textBaseline=[value];

//文字显示在上面，中间还是下面（top, hanging, middle, alphabetic,ideographic, and bottom）

context.shadowOffsetX=[value];

context.shadowOffsetY=[value];

//增加阴影

 

context.globalAlpha=[value];

//设置透明度，从0到1