<script src="./js/hidip-canvas-polyfill.js"></script>
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
getPixelRatio (context) {
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
};
var ratio = getPixelRatio(ctx);
ctx.drawImage(document.querySelector('img'), 0, 0, 300 * ratio, 90 * ratio);
这个博主写的比较清晰:https://segmentfault.com/a/1190000003730246
这个方法试了一下。我的图片显示的有问题,绘制太多内容,渲染速度慢。;
这个方法最简单:
<canvas width="320" height="180" style="width:160px;height:90px;"></canvas>