高清屏中使用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 渐变(Gradients)之CSS3 线性渐变
Jul 08 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
详解CSS3中@media的实际使用
Aug 04 HTML / CSS
CSS3实现鼠标悬停显示扩展内容
Aug 24 HTML / CSS
CSS3 实现的加载动画
Dec 07 HTML / CSS
HTML5移动开发图片压缩上传功能
Nov 09 HTML / CSS
HTML5之web workers_动力节点Java学院整理
Jul 17 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
html5 Canvas实现图片旋转的示例
Jan 15 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
Jul 02 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 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 定义404页面的实现代码
2012/11/19 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
关于document.cookie的使用javascript
2008/04/11 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
js 图片随机不定向浮动的实现代码
2013/07/02 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
Python自动抢红包教程详解
2019/06/11 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
美国翻新电子产品商店:The Store
2019/10/08 全球购物
求职信格式范本
2013/11/15 职场文书
销售经理工作职责
2014/02/03 职场文书
应聘文员自荐信范文
2014/03/11 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
员工培训协议书
2014/09/15 职场文书
高一作文之暖冬
2019/11/09 职场文书
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技
golang连接MySQl使用sqlx库
2022/04/14 Golang