context.drawImage(imageObj,destX,destY);
//为某个画布贴上图片
例子:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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