高清屏中使用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的ruby-position固定注音位置的用法示例
Jul 05 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
html5的localstorage详解
May 09 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
Nov 12 HTML / CSS
简单介绍HTML5中audio标签的使用
Sep 24 HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 HTML / CSS
web字体加载方案优化小结
Nov 29 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 HTML / CSS
在html页面中取得session中的值的方法
Aug 11 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 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
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
如何选择适合你的JavaScript框架
2017/11/20 Javascript
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
python计算N天之后日期的方法
2015/03/31 Python
详解Python中的__new__()方法的使用
2015/04/09 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
弘扬职业精神演讲稿
2014/03/20 职场文书
五水共治一句话承诺
2014/05/30 职场文书
清明节寄语2015
2015/03/23 职场文书
干部外出学习心得体会
2016/01/18 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
react合成事件与原生事件的相关理解
2021/05/13 Javascript