理解与解决高清屏中使用Canvas绘图出现模糊的问题

栏目: Html5 · 发布时间: 5年前

内容简介：高清屏出现以前，屏幕的一个物理像素就是css所定义的一个逻辑像素（估计那个时候还没有物理像素和逻辑像素的概念）。因此使用下面代码就可以在浏览器中展示一个600x386的Canvas。

高清屏出现以前，屏幕的一个物理像素就是css所定义的一个逻辑像素（估计那个时候还没有物理像素和逻辑像素的概念）。因此使用下面代码就可以在浏览器中展示一个600x386的Canvas。

<html>  
  <head>
    <title>Canvas demo</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      html, body {
        width: 100%;
      }
      #canvas {
        display: block;
        border: 1px solid red;
        margin: 10px auto 0;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="600" height="386">Canvas is not supported</canvas>
    <script>
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.arc(300, 150, 20, 0, Math.PI*2);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    </script>
  </body>
</html>

理解与解决高清屏中使用Canvas绘图出现模糊的问题

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Microsoft.NET框架程序设计

Jeffrey Richter / 李建忠 / 清华大学出版社 / 2003-11 / 68.00元

《Microsoft.NET框架程序设计》(修订版)是《微软.NET程序员系列》丛书之一，主要介绍如何开发面向Microsoft.NET框架的各种应用程序。Microsoft.NET框架是微软公司推出的新平台，包含通用语言运行时（CLR）和.NET框架类库（FCL）。《Microsoft.NET框架程序设计》(修订版)将深入解释CLR的工作机制及其提供的各种构造，同时还将讨论FCL中一些重要的类型......一起来看看《Microsoft.NET框架程序设计》这本书的介绍吧!

码农工具

理解与解决高清屏中使用Canvas绘图出现模糊的问题

Microsoft.NET框架程序设计

JS 压缩/解压工具

URL 编码/解码

Markdown 在线编辑器