高清屏中使用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 相关文章推荐
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
IE兼容css3圆角的实现代码
Jul 21 HTML / CSS
CSS3转换功能transform主要属性值分析及实现分享
May 06 HTML / CSS
css3 按钮样式简单可扩展创建
Mar 18 HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
css3的动画特效之动画序列(animation)
Dec 22 HTML / CSS
CSS3实现渐变背景兼容问题
May 06 HTML / CSS
使用phonegap检测网络状态的方法
Mar 30 HTML / CSS
Html5获取高德地图定位天气的方法
Dec 26 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
HTML常用标签超详细整理
Mar 19 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中看实例学正则表达式
2006/12/25 PHP
php将远程图片保存到本地服务器的实现代码
2015/08/03 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
js函数调用常用方法详解
2012/12/03 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
销售主管的自我评价分享
2014/01/03 职场文书
初中体育教学反思
2014/01/14 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
个人自荐书范文
2015/03/09 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
学校工会工作总结2015
2015/05/19 职场文书
创业计划书之面包店
2019/09/17 职场文书
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js
JavaScript前端面试组合函数
2022/06/21 Javascript