Html 如何删除画布中的锯齿线？
在我的项目中，我使用画布设计显示图像预览。我原来的形象是 我用帆布将顶部和底部弯曲成这样 但它的顶部和底部是参差不齐的Html 如何删除画布中的锯齿线？,html,css,canvas,html5-canvas,Html,Css,Canvas,Html5 Canvas,在我的项目中，我使用画布设计显示图像预览。我原来的形象是 我用帆布将顶部和底部弯曲成这样 但它的顶部和底部是参差不齐的 <!DOCTYPE HTML> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body>
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<section id="test"></section>
<script>
var image = new Image();
image.id = "imgBendSource";
image.style.display = "none";
image.onload = function() {
$("#test").append(image);
var newWidth = "415";
var newHeight = "285";
var img = document.getElementById("imgBendSource");
var x1 = 415 / 2;
var x2 = 415;
var y1 = 15; // input y of O here
var y2 = 0;
var eb = (y2 * x1 * x1 - y1 * x2 * x2) / (x2 * x1 * x1 - x1 * x2 * x2);
var ea = (y1 - eb * x1) / (x1 * x1);
var canvasHeight = parseInt(newHeight) + y1;
// create a new canvas for bend image
var canvasElement = '<canvas id="imgBendCanvas" width="' + newWidth + '" height="' + canvasHeight + '"/>';
$("#test").append(canvasElement);
canvasElement = document.getElementById("imgBendCanvas");
var bendCtx = canvasElement.getContext('2d');
for (var x = 0; x < newWidth; x++) {
// calculate the current offset
currentYOffset = (ea * x * x) + eb * x;
bendCtx.drawImage(img, x, 0, 1, newHeight, x, currentYOffset, 1, newHeight);
}
}
image.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
</script>
</body>
</html>
var image=新图像（）；
image.id=“imgBendSource”；
image.style.display=“无”；
image.onload=函数（）{
$（“#测试”）.append（图像）；
var newWidth=“415”；
var newHeight=“285”；
var img=document.getElementById（“imgBendSource”）；
var-x1=415/2；
var x2=415；
var y1=15；//此处输入O的y
var y2=0；
变量eb=（y2*x1*x1-y1*x2*x2）/（x2*x1*x1-x1*x2*x2）；
var ea=（y1-eb*x1）/（x1*x1）；
var canvasHeight=parseInt（newHeight）+y1；
//为折弯图像创建新画布
var canvasElement=“”；
$（“#测试”）.append（canvasElement）；
canvasElement=document.getElementById（“imgBendCanvas”）；
var bendCtx=canvasElement.getContext（'2d'）；
对于（var x=0；x有没有其他方法可以实现这一目标？有可用的插件吗？这取决于您所说的“清除”是什么意思。如果您正在寻找透明度，那么画布在默认情况下是透明的，并且您确实可以看到曲线图像后面围绕曲线位的背景。要更好地看到这一点，请设置主体的背景色 那么，你是如何得出这样一个结论的：它是不透明的？是否将图像导出为支持透明度的格式，如.gif或.png？注意：.jpg不支持它
编辑：问题中的澄清使此答案不再相关。请参考另一个答案。图像被清晰地切割成整数值，这可能是使用中的特定浏览器的原因。您可以尝试以双分辨率绘制弯曲图像，然后以一半大小将其绘制回原图。无论我做什么，我都不能得到jaggis，但我不能用safari进行测试。您应该在其他浏览器中进行测试，以了解情况 --更新-- 我在下面添加了修改后的代码（代码基于markE的示例）。主要更改是使用两个缩放因子：一个用于内部缩放以补偿整数别名，然后是目标缩放。通过这种方式缩小，浏览器应该平滑图像。如果需要，尝试更高的缩放值。如果差异太大，您可能需要在多个步骤中缩小比例。我发现这个和这个有助于解决这个问题
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var img=新图像（）；
img.onload=启动；
img.src=http://i.stack.imgur.com/OgllG.png';
函数start（）{
//----这里的变化
var scalingFactor=2.0；//内部缩放
var scalingFactorDst=0.5；//目标缩放
var curved=曲线图像（img，15,2，比例因子）；
ctx.drawImage（弯曲，5,5，弯曲。宽度*缩放因子DST，弯曲。高度*缩放因子DST）；
//----更改结束
}
函数曲线图像（img、曲线宽度、模糊因子、缩放因子）{
var c=document.createElement（'canvas'）；
var ctx=c.getContext（'2d'）；
c、 宽度=img.width；
c、 高度=（惯性高度+弯曲度+模糊系数）；
//
var newWidth=img.width；
var newHeight=img.height；
var x1=img.宽度/2；
var x2=img.宽度；
var y1=curveDepthY；//此处输入O的y
var y2=0；
变量eb=（y2*x1*x1-y1*x2*x2）/（x2*x1*x1-x1*x2*x2）；
var ea=（y1-eb*x1）/（x1*x1）；
对于（var x=0；x