canvas 翻转 移动 平移 放大 缩小

// canvas 简单例子
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();
//    context.strokeStyle = '#000000';
//    context.strokeRect(200,50,100,50);
//    // 默认旋转是根据0,0中心，使用translate可以按照自己的设置的中心旋转
//    context.translate(250,75);
//    
//    context.rotate(45 * Math.PI /180);
//    context.translate(-250, -75);
//
//    context.beginPath();
//    context.strokeStyle = '#cccccc';
//    context.strokeRect(200,50,100,50);
    
//    // transform 矩阵
//    context.beginPath();
//    context.strokeStyle = '#000000';
//    context.strokeRect(10,10,150,100);
//    
//    context.transform(3,0,0,3,0,0);
//    context.beginPath();
//    context.strokeStyle = '#cccccc';
//    context.strokeRect(10,10,150,100);
    
}

转载于:https://my.oschina.net/wangdk/blog/125188