高清屏中使用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 相关文章推荐
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 HTML / CSS
H5仿微信界面教程(一)
Jul 05 HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 HTML / CSS
HTML常用标签超详细整理
Mar 19 HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 23 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 Http_Template_IT类库进行模板替换
2009/03/19 PHP
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
原生JS实现图片左右轮播
2016/12/30 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
Python中文件遍历的两种方法
2014/06/16 Python
Python中使用logging模块打印log日志详解
2015/04/05 Python
对Python3中的input函数详解
2018/04/22 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
python实现猜拳游戏项目
2020/11/30 Python
aec加密 php_php aes加密解密类(兼容php5、php7)
2021/03/14 PHP
趣味活动策划方案
2014/02/08 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android