HTML5_Canvas(2)-优快云博客

本文详细介绍了HTML5 Canvas绘图的基本用法，包括如何在画布上绘制和操作图像，设置了文字样式并添加阴影效果等内容。此外，还展示了如何通过代码实现图片的加载、缩放及裁剪等功能。

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

本文转自轩脉刃博客园博客，原文链接：http://www.cnblogs.com/yjf512/archive/2011/09/12/2173918.html，如需转载请自行联系原作者