高清屏中使用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实现的颜色渐变按钮的代码教程
Nov 12 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
May 09 HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
Nov 30 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
CSS完成视差滚动效果
Apr 27 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 HTML / CSS
css布局巧妙技巧之css三角示例的运用
Mar 16 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
收音机术语解释
2021/03/01 无线电
php正则表达式使用的详细介绍
2013/04/27 PHP
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
详解JavaScript中的强制类型转换
2019/04/15 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
用Python进行基础的函数式编程的教程
2015/03/31 Python
Python pickle模块用法实例分析
2015/05/27 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
Marlies Dekkers内衣美国官方网上商店:高端内衣品牌
2018/11/12 全球购物
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
酒店服务与管理毕业生求职信
2013/11/02 职场文书
材料采购员岗位职责
2013/12/17 职场文书
中英文自我评价语句
2013/12/20 职场文书
2013年学期结束动员演讲稿
2014/01/07 职场文书
称象教学反思
2014/02/03 职场文书
中学生个人自我评价
2014/02/06 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
文明村镇申报材料
2014/05/06 职场文书
学校评语大全
2014/05/06 职场文书
淘宝店策划方案
2014/06/07 职场文书
音乐幼师求职信
2014/07/09 职场文书
优秀纪检干部材料
2014/08/27 职场文书