高清屏中使用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实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
Jan 31 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
Jan 20 HTML / CSS
a标签下载链接的简单实现
Sep 13 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 HTML / CSS
html5 canvas手势解锁源码分享
Jan 07 HTML / CSS
使用CSS实现小三角边框原理解析
Nov 07 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 INI配置文件的解析实现分析
2011/01/04 PHP
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
php上传大文件设置方法
2016/04/14 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
浅谈js中的闭包
2015/03/16 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
Angular 4 指令快速入门教程
2017/06/07 Javascript
Vue.js 单页面多路由区域操作的实例详解
2017/07/17 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
Python数据结构之单链表详解
2017/09/12 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
django框架两个使用模板实例
2019/12/11 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
应届本科生推荐信范文
2013/12/25 职场文书
软件毕业生个人鉴定
2014/03/03 职场文书
新品发布会主持词
2014/04/02 职场文书
迟到检讨书范文
2015/01/27 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python