高清屏中使用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 background-clip,background-origin和border-image教程
Jan 27 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
CSS3实现渐变背景兼容问题
May 06 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
May 17 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
Mar 10 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
CSS3新特性详解(五):多列columns column-count和flex布局
Apr 30 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 15 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 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页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
javascript iframe编程相关代码
2009/12/28 Javascript
js 巧妙去除数组中的重复项
2010/01/25 Javascript
Jquery倒计时源码分享
2014/05/16 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
JS验证全角与半角及相互转化的介绍
2017/05/18 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
Python采用raw_input读取输入值的方法
2014/08/18 Python
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
python装饰器初探(推荐)
2016/07/21 Python
Python 性能优化技巧总结
2016/11/01 Python
Python可变参数用法实例分析
2017/04/02 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
集团公司总经理岗位职责
2013/12/20 职场文书
疾病防治方案
2014/05/31 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
超市员工辞职信范文
2015/05/12 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis