高清屏中使用Canvas绘图出现模糊的问题及解决方法


Posted in HTML / CSS onJune 03, 2019

高清屏出现以前,屏幕的一个物理像素就是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绘图出现模糊的问题及解决方法 

总结

以上所述是小编给大家介绍的高清屏中使用Canvas绘图出现模糊的问题及解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS图片翻转动画技术详解(IE也实现了)
Apr 03 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
HTML5 device access 设备访问详解
May 24 HTML / CSS
用HTML5制作一个简单的弹力球游戏
May 12 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 HTML / CSS
HTML5未来发展趋势
Feb 01 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
Feb 28 HTML / CSS
html5表单及新增的改良元素详解
Jun 07 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
Dec 14 HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 #HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 #HTML / CSS
HTML5新增form控件和表单属性实例代码详解
May 15 #HTML / CSS
Html5 滚动穿透的方法
May 13 #HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 #HTML / CSS
使用html5实现表格实现标题合并的实例代码
May 13 #HTML / CSS
基于Html5实现的语音搜索功能
May 13 #HTML / CSS
You might like
PHP日期处理函数 整型日期格式
2011/01/12 PHP
深入php处理整数函数的详解
2013/06/09 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
PHP利用imagick生成组合缩略图
2016/02/19 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
Pycharm更换python解释器的方法
2018/10/29 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
python实现人机五子棋
2020/03/25 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
德国家具在线:Fashion For Home
2017/03/11 全球购物
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
方法名是否可以与构造器的名字相同
2012/06/04 面试题
请解释virtual关键字的含义
2015/06/17 面试题
中间件的定义
2016/08/09 面试题
信息管理专业学生自荐信格式
2013/09/22 职场文书
人事文员岗位职责
2014/02/16 职场文书
2014年社区植树节活动方案
2014/02/28 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库