高清屏中使用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 相关文章推荐
利用CSS3的定位页面元素
Aug 29 HTML / CSS
纯HTML+CSS3制作导航菜单(附源码)
Apr 24 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
css3学习系列之移动属性详解
Jul 04 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
纯css3实现思维导图样式示例
Nov 01 HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
Oct 08 HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
Sep 24 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
Apr 07 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
常用的HTML5列表标签
Jun 20 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小偷相关截取函数备忘
2010/11/28 PHP
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
python同时替换多个字符串方法示例
2019/09/17 Python
用Python写一个自动木马程序
2019/09/17 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
医药大学生求职简历的自我评价
2013/10/17 职场文书
幼儿园庆六一游园活动方案
2014/01/29 职场文书
工程技术员岗位职责
2014/03/02 职场文书
合伙经营协议书范本
2014/04/18 职场文书
保护环境倡议书300字
2014/05/19 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
考察邀请函范文
2015/01/31 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
Go遍历struct,map,slice的实现
2021/06/13 Golang
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技