高清屏中使用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背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
CSS3之边框多颜色Border-color属性使用示例
Oct 11 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
Jan 31 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
Sep 25 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 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+jQuery 注册模块开发详解
2014/10/14 PHP
PHP函数超时处理方法
2016/02/14 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
传智播客学习之java 反射
2009/11/22 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
跟老齐学Python之永远强大的函数
2014/09/14 Python
Python批量发送post请求的实现代码
2018/05/05 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
python 切换root 执行命令的方法
2019/01/19 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
在python中使用nohup命令说明
2020/04/16 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
会计毕业生自荐信
2013/11/21 职场文书
计算机专业推荐信范文
2013/11/27 职场文书
建筑专业自荐信范文
2014/01/05 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript