高清屏中使用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 相关文章推荐
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 HTML / CSS
html5用video标签流式加载的实现
May 20 HTML / CSS
HTML5图片层叠的实现示例
Jul 07 HTML / CSS
Canvas绘制像素风图片的示例代码
Sep 25 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
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
ajax取消挂起请求的处理方法
2013/03/18 PHP
浅析php工厂模式
2014/11/25 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
python利用datetime模块计算时间差
2015/08/04 Python
python微信公众号之关键词自动回复
2018/06/15 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
数控机械专业个人的自我评价
2014/01/02 职场文书
另类冲刺标语
2014/06/24 职场文书
离职报告范文
2014/11/04 职场文书
英语辞职信范文
2015/02/28 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS