高清屏中使用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 相关文章推荐
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
css3打造一款漂亮的卡哇伊按钮
Mar 20 HTML / CSS
纯CSS3实现滚动的齿轮动画效果
Jun 05 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 HTML / CSS
CSS3制作hover下划线动画
Mar 27 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
Aug 05 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
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
处理php自动反斜杠的函数代码
2010/01/05 PHP
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
php switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
JQuery datepicker 使用方法
2011/05/20 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
numpy判断数值类型、过滤出数值型数据的方法
2018/06/09 Python
pandas 选择某几列的方法
2018/07/03 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
Python底层封装实现方法详解
2020/01/22 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
python 如何调用远程接口
2020/09/11 Python
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏