javascript - Canvas DrawImage() 质量差

<分区>

我对 Html5 Canvas 有疑问

我画了一个图像，但它的质量变得很差 enter image description here

用canvas画好之后就变成了这个

enter image description here

我的代码在这里

<script type="text/javascript">

$canvasWidth = $('#canvas').width;
$canvasHeight = $('#canvas').height;
var alpha = 0.0;

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');


function draw(){
    var delta = 0.05;
    ctx.clearRect(0,0,$canvasWidth, $canvasHeight);
    ctx.globalAlpha = alpha;

    var logo= new Image();

    WandioLight.onload = function(){
        ctx.drawImage(logo, 0, 0, 250, 167);

    };

    logo.src = "logo.png";

    alpha += delta;
    if(alpha > 1.0){
        return false;
    }
    setTimeout(draw, 50);
}

最佳答案

enter image description here

您可以逐渐缩小图像以获得更好的效果。

由于您的最终尺寸是原始尺寸的 1/4，您可以:

将 1000x669 的图像缩放到临时 Canvas 上的一半到 500x334
将 500x335 Canvas 缩放到主 Canvas 上的一半到 250x167

这是示例代码和演示:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var img=new Image();
img.onload=start;
img.src="https://ictcluster.ge/wp-content/uploads/2018/09/wandio-logo-1-1024x724.png";
function start(){


  // scale the 1000x669 image in half to 500x334 onto a temp canvas
  var c1=scaleIt(img,0.50);

  // scale the 500x335 canvas in half to 250x167 onto the main canvas
  canvas.width=c1.width/2;
  canvas.height=c1.height/2;
  ctx.drawImage(c1,0,0,250,167);

}

function scaleIt(source,scaleFactor){
  var c=document.createElement('canvas');
  var ctx=c.getContext('2d');
  var w=source.width*scaleFactor;
  var h=source.height*scaleFactor;
  c.width=w;
  c.height=h;
  ctx.drawImage(source,0,0,w,h);
  return(c);
}

body{ background-color: ivory; padding:10px; }
canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>

关于javascript - Canvas DrawImage() 质量差，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28498014/

上一篇：javascript - 如何使用 HTML5 的全屏 API 检查元素是否全屏

下一篇：html - 如何使用 css 淡出/模糊 div 的边框？

JavaScript 图表库 - Google Analytics 风格

java - Android - 游戏循环中的主动渲染？

javascript - 使用 ('click' ) 而不是点击

javascript - 单击按钮即可触发 2 个操作

php - 传递 PHP 对象以在外部 JS 脚本中使用

html - 将鼠标悬停在 SVG 上可更改颜色

html - 为什么表格不好而不是 CSS？

javascript - canvas 标签可以用于在页面上的其他项目之上绘制吗？

javascript - Angularjs $超时生成无限循环