我們在使用高清屏進行工作或者娛樂的時候都會看起來比較舒適,那么大家知道嗎?屏幕的一個物理像素就是css所定義的一個邏輯像素。所以下面我們來介紹有關于“怎么解決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這方面的內容大家都可以在W3Cschool這個網站中進行學習!