cari

Rumah >hujung hadapan web >html tutorial >Garis lukisan kanvas HTML5 kelihatan kabur

Garis lukisan kanvas HTML5 kelihatan kabur

WBOY
WBOYke hadapan
2023-09-08 20:45:051124semak imbas

Tugas yang akan kami laksanakan dalam artikel ini adalah mengenai lukisan kanvas HTML5, contohnya garisan kelihatan kabur.

Kami melihat kesan kabur kerana peranti berbeza mempunyai nisbah piksel yang berbeza. Penyemak imbas atau peranti yang digunakan untuk melihat kanvas selalunya mempengaruhi kekaburan imej itu.

Widget Nisbah Piksel antara muka Tetingkap mengembalikan nisbah piksel fizikal peranti paparan kepada resolusi piksel CSSnya. Nombor ini juga boleh difahami sebagai nisbah fizikal kepada piksel CSS, atau saiz satu piksel kepada piksel yang lain.

Mari kita gali contoh berikut untuk mengetahui lebih lanjut tentang lukisan kanvas HTML5, seperti garisan yang kelihatan kabur.

Contoh 1

Dalam contoh di bawah, kami mengaburkan teks mudah untuk menjelaskannya.

Garis lukisan kanvas HTML5 kelihatan kabur

Kami sedang mempertimbangkan imej kabur ini

<!DOCTYPE html>
<html>
<body>
   <canvas id="my tutorial"
      style="border:1px solid black;">
   </canvas>
   <script>
      var canvas = document.getElementById('my tutorial');
      var ctx = canvas.getContext('2d');
      window.devicePixelRatio=2;
      var size = 170;
      
      canvas.style.width = size + "px";
      canvas.style.height = size + "px";
      var scale = window.devicePixelRatio;
      
      canvas.width = Math.floor(size * scale);
      canvas.height = Math.floor(size * scale);
      
      ctx.scale(scale, scale);
      ctx.font = '10px Arial';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      
      var x = size / 2;
      var y = size / 2;
      var textString = "TUTORIALSPOINT";
      ctx.fillText(textString, x, y);
   </script>
</body>
</html>

Apabila skrip dijalankan, ia akan menghasilkan output teks, yang telah kami anggap sebagai contoh di atas tanpa menjadi kabur.

Contoh 2

Memandangkan lukisan kami kelihatan agak kabur. 

<!DOCTYPE html>
<html>
   <style>
      div {
          border: 1px solid black;
          width: 100px;
          height: 100px;
      }
      canvas, div {background-color: #F5F5F5;}
      canvas {border: 1px solid white;display: block;}
   </style>
<body>
    <table>
        <tr><td>Line on canvas:</td></tr>
        <tr><td><canvas id="tutorial" width="100" height="100"></td><td><div> </div></td></tr>
    </table>
    <script>
       var ctx = document.getElementById("tutorial").getContext("2d");
       ctx.lineWidth = 1;
       ctx.moveTo(2, 2);
       ctx.lineTo(98, 2);
       ctx.lineTo(98, 98);
       ctx.lineTo(2, 98);
       ctx.lineTo(2, 2);
       ctx.stroke();
    </script>
</body>
</html>

Apabila anda menjalankan skrip di atas, tetingkap output akan muncul, menunjukkan garis kabur pada kanvas dan sempadan 1 piksel pada halaman web.

Atas ialah kandungan terperinci Garis lukisan kanvas HTML5 kelihatan kabur. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 css 接口
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk menentukan dalam HTML sama ada elemen atau