Html5 canvas HTML5画布笔划未抗锯齿
我只是想在画布上用粗的抗锯齿笔划画一个圆 圆按预期绘制,但笔划的边缘非常粗糙。我一直在读Chrome强制抗锯齿,所以不知道该怎么做 小提琴: HTMLHtml5 canvas HTML5画布笔划未抗锯齿,html5-canvas,antialiasing,stroke,Html5 Canvas,Antialiasing,Stroke,我只是想在画布上用粗的抗锯齿笔划画一个圆 圆按预期绘制,但笔划的边缘非常粗糙。我一直在读Chrome强制抗锯齿,所以不知道该怎么做 小提琴: HTML <div id="main"> <canvas id="myCanvas" width="400" height="400" style="border: 1px solid #000"></canvas> <div id="counter" style="height: 100p
<div id="main">
<canvas id="myCanvas" width="400" height="400" style="border: 1px solid #000"></canvas>
<div id="counter" style="height: 100px; width: 100px; border: 1px solid #000">
</div>
</div>
JS+jQuery
<script>
function calc(myVal) {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var radius = 70;
ctx.beginPath();
ctx.arc(140, 140, 20, myVal * Math.PI, 0, true);
ctx.lineWidth = 14;
ctx.stroke();
};
$(document).ready(function() {
var count = 0;
var parsedCount;
function go(){
if (count <= 200) {
parsedCount = count*.01
$('#counter').html('<p>' + parsedCount + '</p>');
calc(parsedCount);
count++;
}
}
setInterval(go, 10)
});
</script>
函数计算(myVal){
var canvas=document.getElementById(“myCanvas”);
var ctx=canvas.getContext(“2d”);
var半径=70;
ctx.beginPath();
ctx.arc(140,140,20,myVal*Math.PI,0,true);
ctx.lineWidth=14;
ctx.stroke();
};
$(文档).ready(函数(){
var计数=0;
var-parsedCount;
函数go(){
如果(count我的同事刚刚指出,我需要在每次绘制后使用clearRect清除画布。笔划只是在彼此之上绘制的
function calc(myVal) {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var radius = 70;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(140, 140, 20, myVal * Math.PI, 0, true);
ctx.lineWidth = 14;
ctx.stroke();
};