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

实时了解作者更多技术文章,技术心得,请关注微信公众号“轩脉刃的刀光剑影”

本文基于署名-非商业性使用 3.0许可协议发布,欢迎转载,演绎,但是必须保留本文的署名叶剑峰(包含链接http://www.cnblogs.com/yjf512/),且不得用于商业目的。如您有任何疑问或者授权方面的协商,请与我联系

原文地址:https://www.cnblogs.com/yjf512/p/2173918.html