高清屏中使用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 相关文章推荐
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 HTML / CSS
html5中canvas学习笔记2-判断浏览器是否支持canvas
Jan 06 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
HTML最新标准HTML5总结(必看)
Jun 13 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
总结html5自定义属性有哪些
Apr 01 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 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
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
PHP常用的三种设计模式
2017/02/17 PHP
php依赖注入知识点详解
2019/09/23 PHP
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
2020/09/04 Javascript
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
新手该如何学python怎么学好python?
2008/10/07 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
django 基于中间件实现限制ip频繁访问过程详解
2019/07/30 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
使用Python实现分别输出每个数组
2019/12/06 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
学院书画协会部门岗位职责
2013/12/01 职场文书
办理房产证委托书
2014/09/18 职场文书
2014年减负工作总结
2014/12/10 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
退休教师追悼词
2015/06/23 职场文书
生日寿星公答谢词
2015/09/29 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript