$(document).ready(function() {
    // 获取Canvas元素和上下文
    var canvas = $('#myCanvas')[0];
    var ctx = canvas.getContext('2d');
    
    // 创建一个新的Image对象
    var img = new Image();
    
    // 设置图像源
    img.src = 'path/to/your/image.jpg';
    
    // 等待图像加载完成
    img.onload = function() {
        // 将图像绘制到Canvas上（原始尺寸）
        ctx.drawImage(img, 0, 0);
        
        // 将图像拉伸到Canvas的整个尺寸
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    };
});

$(document).ready(function() {
    var canvas = $('#myCanvas')[0];
    var ctx = canvas.getContext('2d');
    
    var img = new Image();
    img.src = 'path/to/your/image.jpg';
    
    img.onload = function() {
        // 计算保持宽高比的缩放比例
        var hRatio = canvas.width / img.width;
        var vRatio = canvas.height / img.height;
        var ratio = Math.min(hRatio, vRatio);
        
        // 计算居中位置
        var centerShiftX = (canvas.width - img.width * ratio) / 2;
        var centerShiftY = (canvas.height - img.height * ratio) / 2;
        
        // 绘制保持宽高比的图像
        ctx.drawImage(
            img, 
            0, 0, img.width, img.height, 
            centerShiftX, centerShiftY, 
            img.width * ratio, img.height * ratio
        );
    };
});

// 设置Canvas的实际尺寸（属性尺寸）
var canvas = $('#myCanvas')[0];
canvas.width = 800;  // 实际像素宽度
canvas.height = 600; // 实际像素高度

// CSS尺寸可以单独设置
$('#myCanvas').css({
    'width': '400px',
    'height': '300px'
});

var img = new Image();
img.crossOrigin = "Anonymous";  // 请求CORS权限
img.src = 'https://example.com/image.jpg';

// 确保在onload回调中绘制
img.onload = function() {
    // 绘制代码
};

// 如果src在onload之后设置
img.src = 'path/to/image.jpg';

// 从原始图像裁剪一部分，然后拉伸到Canvas
ctx.drawImage(
    img, 
    sourceX, sourceY, sourceWidth, sourceHeight,  // 源图像裁剪区域
    destX, destY, destWidth, destHeight          // 目标Canvas区域
);

$(window).resize(function() {
    var canvas = $('#myCanvas')[0];
    var container = $('#canvasContainer');
    
    // 调整Canvas尺寸以适应容器
    canvas.width = container.width();
    canvas.height = container.height();
    
    // 重新绘制图像
    if (img.complete) {
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    }
});