高清屏中使用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截图_动力节点Java学院整理
Jul 11 HTML / CSS
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
HTML5实现Notification API桌面通知功能
Mar 02 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
Jan 26 HTML / CSS
HTML5本地存储之Web Storage应用介绍
Jan 06 HTML / CSS
使用分层画布来优化HTML5渲染的教程
May 08 HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 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源码分析之变量的存储过程分解
2014/07/03 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python多线程抓取天涯帖子内容示例
2014/04/03 Python
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
python利用7z批量解压rar的实现
2019/08/07 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
工地门卫岗位职责
2013/12/30 职场文书
禁止酒驾标语
2014/06/25 职场文书
十八大宣传标语
2014/10/09 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
2014年测量员工作总结
2014/12/12 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
给学校的建议书400字
2015/09/14 职场文书
2016大学军训心得体会
2016/01/11 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang