使用canvas畫圖,圖形模糊怎麼辦
阿新 • • 發佈:2019-02-05
在說解決辦法之前,例行慣例,簡要的說明一下Html5中的Canvas。Canvas是Html5製圖中常用的元素,但其本身並沒有繪製能力,它僅僅是圖形的容器,要製圖還必須依靠指令碼。按照Canvas中提供的方法,我們繪製出各種我們想要的圖形,本來說這樣就已經很棒了,但是有一個致命因素讓人很心塞。對美觀比較講究的同學幾乎不能忍這個因素,就是繪製的圖無比的模糊!!!
所以本人在研究過各種辦法,也用過國外大神的庫hidpi-canvas-polyfill,但也遇到了一些很難避免的問題。於是經過幾次嘗試之後,最終採用了一種簡單粗暴的辦法:將canvas繪製過程放大2倍,然後將整個canvas元素或者其父元素縮小兩倍。
我們先看一個沒有做過處理的栗子,我們可以看到該栗子畫出來的圓,那叫一個模糊,巨醜啊。
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="400" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas" );
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.fillStyle="yellow";
ctx.arc(200,150,100,0,2*Math.PI);
ctx.stroke();
ctx.fill();
</script>
</body>
</html>
下面我們再來看看,做放大處理然後再縮小的效果。
<!DOCTYPE html>
<html>
<head>
<style>
.container{
zoom:0.5;
}
</style>
</head>
<body>
<div class="container">
<canvas id="myCanvas" width="800" height="600" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.scale(2,2);
ctx.beginPath();
ctx.fillStyle="yellow";
ctx.arc(200,150,100,0,2*Math.PI);
ctx.stroke();
ctx.fill();
</script>
</body>
</html>
我們再看效果,畫出來的圖是不是細膩了許多。
這裡我們有幾點需要注意:
- canvas元素的寬和高為之前的兩倍
- 使用ctx.scale(2,2)將繪圖放大兩倍
- 在父元素中新增的class中有放大縮小元素的zoom屬性,0.5為縮小一倍。當然你也可以用css3中的transform:scale(0.5,0.5)的辦法去縮小,只是使用這種方法不會改變佈局大小,即canvas雖然視覺上變小了,但它仍舊會佔兩倍的高和寬。