HTML5 canvas 画图, 大图缩小时清晰度问题

发布网友发布时间：2022-04-23 21:08

共6个回答

热心网友时间：2022-04-20 00:05

这是因为图像的采样方式不够好造成的
解决方案是自己写算法进行平均采样
实现方式有两种，一种是js对像素点进行手动合并采样，具体算法可以用这个：github。com斜杠sapics斜杠scale.js
还有一个方案使用webgl，用gpu对图片进行平均合并采样，需要自己写shader，并且需要比较新的浏览器和电脑，需要支持webgl，运行效率比较高。

热心网友时间：2022-04-20 01:23

解决办法
1 转SVG 格式这是矢量图形放大缩小不会失真
2 你的画布面积太大了你上传的图片被缩小了很多很多所以才会这么模糊
3 不是说H5不能做室内平面图 CAD 才是强项

热心网友时间：2022-04-20 02:57

首先，你这个代码中最后的setInterval("draw()",);应

热心网友时间：2022-04-20 04:49

varcanvas=document.getElementById("myCan

热心网友时间：2022-04-20 06:57

网页链接

热心网友时间：2022-04-20 09:21

是啊，好奇怪呀。。。为什么呢。。。不过倒是可以投机取巧：

<body>
<canvas id="bo" width="500" height="500" style="border:1px solid">您的浏览器不支持次应用，请更新浏览器</canvas>
<input type="button" onclick="clea()" value="清空" />
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script>
var canvasInit = function(){
  var canvas = document.getElementById('bo');
  var pic=canvas.getContext("2d");
  pic.lineWidth=5;
  pic.strokeStyle="red";
  var con=false;
  $("#bo").mousedown(function(e){
    var mouseX = e.pageX - this.offsetLeft;
    var mouseY = e.pageY - this.offsetTop;
    con=true;
    pic.moveTo(mouseX,mouseY);
  });
  $("#bo").mouseup(function(e){
    con=false;
  })
  $("#bo").mousemove(function(e){
    var mouseX = e.pageX - this.offsetLeft;
    var mouseY = e.pageY - this.offsetTop;
    if(con)
      pic.lineTo(mouseX,mouseY);
    pic.stroke();
  })
}
canvasInit();
function clea(){
  var tmp = $('#bo').clone();
  $('#bo').remove();
  $('body').prepend(tmp);
  canvasInit();
//pic.clearRect(0,0,500,500);
}
</script>

追问你这个代码和我的问题不相关，没有解决我的问题！
你这是职业刷客啊，刷分就那么重要么？！看你最近回答的问题，都牛头不对马嘴的，你别指望从我这拿到分！百度知道有个举报机制就好了

楼下的接力，好的回答追加50分！

全部栏目

HTML5 canvas 画图, 大图缩小时清晰度问题