简体中文(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
330
<!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,求指教？

大家讲道理
大家讲道理

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

reply all(2)
巴扎黑
巴扎黑2017-04-17 13:17:41 2 floor

The width and height of the canvas style are different from the width and height of the attribute. The width and height of the style are the pixel width and height actually displayed on the page. The width and height of the attribute are the environment width and height of the context. The style width and height are the same as the attribute width and height. The default is 300 150. Now you change its style width and height to 100% 600px, which is equivalent to drawing 300 150 in the context environment to 100% 600px in reality. , so it is blurred, so generally the width and height of the style must be consistent with the width and height of the attribute.
eg.

<canvas width='600' height='300' style='width:600px;height:300px;' ></canvas>
Like +0
Add Reply
刘奇
刘奇2017-04-17 13:17:41 1 floor

The correct answer is that the browser needs to scale the bitmap. So the blur is certain.

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！