高清屏中使用Canvas绘图出现模糊的问题及解决方法
发布时间：2019-06-03 14:36:57 作者：佚名 
我要评论
我要评论这篇文章主要介绍了高清屏中使用Canvas绘图出现模糊的问题及解决方法,需要的朋友可以参考下
高清屏出现以前，屏幕的一个物理像素就是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绘图出现模糊的问题及解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这是一款基于html5 canvas实现的毛玻璃模糊背景效果源码。背景是图片的模糊显示效果，当鼠标在屏幕上涂抹时，原本模糊的地方会变成清晰的图片2019-04-30
这篇文章主要介绍了深入了解canvas在移动端绘制模糊的问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-30
HTML5 Canvas实现带模糊光晕背景的五角星粒子滤镜特效动画源码
这是一款基于HTML5 Canvas实现带模糊光晕背景的五角星粒子滤镜特效动画源码。鼠标从画面上滑过时可看到连续出现彩色发光的五角星跟随鼠标出现、扩散移动并最终消失。右上角2018-08-20
html5基于canvas绘制带有透明圆点的模糊背景动画特效。有需要的朋友可以直接下载使用，本段代码可以在各个网页使用2018-04-04
这篇文章主要介绍了HTML5 Canvas图像模糊完美解决办法,需要的朋友可以参考下2018-02-06
一款基于HTML5+Canvas实现的图片马赛克模糊动画特效源码
经常可以在网上或者电视上看到被马赛克模糊的图片或者视频，今天我们要利用HTML5 Canvas技术来实现图片的马赛克模糊效果2015-02-05
HTML5 Canvas实现3D旋转物体动画及模糊发光特效源码
这是一款HTML5实现的3D动画是旋转物体特效源码，并且利用CSS3的特性，物体会发出模糊的发光的动画特效，附带旋转效果，整体特效看起来炫酷十足。2014-06-23html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
上次我们讲到，canvas有时候会出现1像素的线条模糊不清且好像更宽的情况,这样的线条显然不是我们想要的。这篇文章的目的就是弄清楚里面的原理，以及解决它,感兴趣的朋友可2013-01-09- 苹果iPhone 6S的基本配置已确定，采用A9处理器，其内存方面从1G升级到了2G内存，摄像头方面从800万像素升级到了1200万像素的摄像头2015-06-18
最新评论