canvas画图模糊问题

来源：互联网发布：浙师大行知学院好不好编辑：程序博客网时间：2024/05/16 04:58

使用canvas画图时，会遇到图片模糊的问题。
1.可以使用hidpi-canvas-polyfill；
举个栗子

var getPixelRatio = function(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()的时候，给width和height乘以ratio，如下：

ctx.drawImage(document.querySelector('img'), 10, 10, 300 * ratio, 90 * ratio);

2.先将canvas画布放大两倍，后用css3将canvas缩小两倍，同理可清晰。

<!DOCTYPE html><html><head>  <style>   .container{     zoom:0.5;//缩小   }  </style></head><body><div class="container">  <canvas id="myCanvas" width="800" height="600">  Your browser does not support the HTML5 canvas tag.  </canvas></div><script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.scale(2,2);//放大ctx.beginPath();ctx.fillStyle="green";ctx.arc(200,150,100,0,2*Math.PI);ctx.stroke();ctx.fill();</script> </body></html>

阅读全文

0 0