高清屏中使用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图标制作教程制作云图标
Jan 19 HTML / CSS
css3中背景尺寸background-size详解
Sep 02 HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 HTML / CSS
css3学习系列之移动属性详解
Jul 04 HTML / CSS
CSS3实现彩色进度条动画的示例
Oct 29 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
May 06 HTML / CSS
浅析HTML5中header标签的用法
Jun 24 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
Aug 04 HTML / CSS
Html5定位终极解决方案
Feb 05 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
Nov 11 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插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
jQuery中获取Radio元素值的方法
2013/07/02 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
Function.prototype.apply()与Function.prototype.call()小结
2016/04/27 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
webpack3之loader全解析
2017/10/26 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
python树莓派红外反射传感器
2019/01/21 Python
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
Django 自动生成api接口文档教程
2019/11/19 Python
numpy 声明空数组详解
2019/12/05 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
python实现取余操作的简单实例
2020/08/16 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
服务员岗位职责
2014/01/29 职场文书
开业典礼主持词
2014/03/21 职场文书
申论倡议书范文
2014/05/13 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
个人务虚会发言材料
2014/10/20 职场文书
2016公司年会主持词
2015/07/01 职场文书
Python实现制作销售数据可视化看板详解
2021/11/27 Python
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL