高清屏中使用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的@media属性实现页面响应式布局示例代码
Feb 10 HTML / CSS
CSS3+js实现简单的时钟特效
Mar 18 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 HTML / CSS
Html分层的box-shadow效果的示例代码
Mar 30 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 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 生成签名及验证签名详解
2016/10/26 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
JS跨域总结
2012/08/30 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
Python random模块的使用示例
2020/10/10 Python
python实现代码审查自动回复消息
2021/02/01 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
竞聘上岗演讲
2014/05/19 职场文书
努力学习保证书
2015/02/26 职场文书
求职简历自我评价2015
2015/03/10 职场文书
2015年药房工作总结
2015/04/25 职场文书
观看建国大业观后感
2015/06/01 职场文书
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS