高清屏中使用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实现的3D立方体旋转效果教程
Apr 26 HTML / CSS
纯CSS3实现圆角效果(含IE兼容解决方法)
May 07 HTML / CSS
CSS3效果:自定义“W”形运行轨迹实例
Mar 29 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 HTML / CSS
HTML页面中添加Canvas标签示例
Jan 01 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
Jul 19 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 HTML / CSS
HTML速写之Emmet语法规则的实现
Apr 07 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/03 冲泡冲煮
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
php短信接口代码
2016/05/13 PHP
微信支付开发订单查询实例
2016/07/12 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
python实现的简单RPG游戏流程实例
2015/06/28 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
python里dict变成list实例方法
2019/06/26 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
Django URL参数Template反向解析
2020/11/24 Python
简单说说tomcat的配置
2013/05/28 面试题
总经理助理的八要求
2013/11/12 职场文书
大课间体育活动方案
2014/03/12 职场文书
经典而简洁的婚礼主持词
2014/03/13 职场文书
五年级上册复习计划
2015/01/19 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
健康教育主题班会
2015/08/14 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫
Python Flask实现进度条
2022/05/11 Python
python如何读取和存储dict()与.json格式文件
2022/06/25 Python
ubuntu如何搭建vsftpd服务器
2022/12/24 Servers