canvas画图模糊问题

最新推荐文章于 2024-05-18 09:52:08 发布

枫之记

最新推荐文章于 2024-05-18 09:52:08 发布

阅读量1.2k

点赞数 1

分类专栏：小技巧 canvas 文章标签： canvas

本文链接：https://blog.csdn.net/arey_maple/article/details/78329864

版权

小技巧同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

canvas

1 篇文章 0 订阅

订阅专栏

使用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>

枫之记

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas画图模糊问题

使用canvas画图时，会遇到图片模糊的问题。 1.可以使用hidpi-canvas-polyfill；举个栗子var getPixelRatio = function(context) { var backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio ||
复制链接

扫一扫