简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
html5 - 为什么canvas 绘制出来的图像是模糊的，是什么原因造成的？
大家讲道理
大家讲道理 2017-04-17 13:15:41
0
2
357
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test Html5</title>
    <style type="text/css">
    *{margin: 0; padding: 0;}
    .content {width: 1200px; margin: 0 auto; padding: 20px 0;}
    #canvas {width: 100%; height: 600px; border: 2px solid #333;}
</style>
</head>
<body>
    <p class="content">
        <canvas id="canvas">你的浏览器不支持canvas!!!</canvas>
    </p>
</body>

<script type="text/javascript">
  window.onload = function(){
        var canvas  = document.getElementById("canvas"); //获取canvas
       var context = canvas.getContext('2d'); //获取2d上下文绘图环境
       //context.strokeStyle = "#aaa"; //描边样式, #666,rgba(12,12,13,0.3)
       context.strokeStyle   = "#ff0000";  //填充样式
     context.strokeRect(10,10,10,10);
     
     context.strokeStyle= "rgba(77,99,98,0.8)";
     //context.lineWidth = 2;
     context.strokeRect(0,0,10,10);
     //context.clearRect(0,0,22,22);
     //绘制路径
    context.beginPath();
    context.arc(20,20,50,0,2*Math.PI,true);
    context.moveTo(70, 70);
    context.lineTo(100,100);
    context.stroke();
   } 
 </script>
 </html>

设置 context.lineWidth = 1也没用，默认的宽度是2px,

为什么绘制出来的图形是模糊的？刚刚接触canvas,求指教？

大家讲道理
大家讲道理

光阴似箭催人老，日月如移越少年。

Antworte allen(2)
巴扎黑
巴扎黑2017-04-17 13:17:41 2 Etage

canvas 样式的宽高和属性的宽高是不一样的，样式的宽高就是实际显示在页面的像素宽高，属性的宽高是context的环境宽高，样式宽高和属性宽高默认都是300 150，你现在改了它的样式宽高为100% 600px，相当于把context环境内的300 150画在了现实中的100% 600px里，所以就模糊了，所以一般都要保持样式的宽高和属性的宽高一致。
eg.

<canvas width='600' height='300' style='width:600px;height:300px;' ></canvas>
Wie +0
Antwort hinzufügen
刘奇
刘奇2017-04-17 13:17:41 1 Etage

楼上正解，浏览器由此需要对位图进行缩放。所以模糊是一定的了。

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！