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.drawImage(imageObj,destX,destY);

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

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

context.font=[value];

context.fillStyle=[value];

context.strokeStyle=[value];

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

context.textAlign=[value];

context.textBaseline=[value];

context.shadowOffsetX=[value];

context.shadowOffsetY=[value];

context.globalAlpha=[value];