HTML5 CANVAS中的SAVE跟RESTORE的原理详解和应用
HTML5 CANVAS中的SAVE和RESTORE的原理详解和应用
/** *save是保存当前绘图状态,并把它压入一个堆栈 restore是恢复上次保存的绘图状态,从堆栈弹出。 关键在于绘图状态,它是指Canvas的平移、放缩、旋转、错切、裁剪等操作或者颜色、线条等样式。 */ window.onload = function() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.translate(50, 50); context.save(); //坐标原点移到画布中心,并保存这个状态 context.rotate(Math.PI / 2); //画布旋转90度 context.beginPath(); context.moveTo(0, -50); context.lineTo(-50, 0);//箭头的左边(或上边)边的线 context.moveTo(0, -50); context.lineTo(50, 0); //竖线 context.moveTo(0, -50); context.lineTo(0, 50); context.closePath(); //画一个向右的箭头 context.restore(); context.fillRect(40, 40, 10, 10); //画一点,restore后点在右下角,没有restore刚点在左下角(因restore到save前的状态【那个状态是画布没有旋转90度的, //此时,中心点在中间,起点40、40处画方形:fillRect(40, 40..就是在左下角的位置了 】) context.stroke(); }