HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例

翻转、移动、平移、放大、缩小

XML/HTML Code复制内容到剪贴板

var canvas = document.getElementById(‘canvas’);   
if (canvas.getContext) {   
    var context = canvas.getContext(‘2d’);   
    // 放大与缩小   
    context.beginPath();   
    context.strokeStyle = "#000000";   
    context.strokeRect(10,10,150,100);   
        
    // 放大3倍   
    context.scale(3,3);   
    context.beginPath();   
    context.strokeStyle = ‘#cccccc’;   
    context.strokeRect(10,10,150,100)   
        
    // 缩小   
    context.scale(0.5,0.5);   
    context.beginPath();   
    context.strokeStyle = ‘#cccccc’;   
    context.strokeRect(10,10,150,100)   
        
     // 翻转   
    var img = new Image();   
    img.src = ‘images/1.jpg’;   
    img.onload = function(){   
        context.drawImage(img, 10,10);           
        context.scale(1, -1);   
        context.drawImage(img, 0, -500);   
    }   
    // 平移   
    context.beginPath();   
    context.strokeStyle = ‘#000000’;   
    context.strokeRect(10,101,150,100);   
    // x移动 50  y 移动100   
    context.translate(50,100);   
    context.beginPath();   
    context.strokeStyle = ‘#cccccc’;   
    context.strokeRect(10,10,150,100);   
    // 旋转   
    context.beginPath();