Javascript 如何在<；中绘制对角线；帆布>；在Safari/Chrome/Firefox中看起来是一样的吗？_Javascript_Html_Canvas_Safari

Javascript 如何在<；中绘制对角线；帆布>；在Safari/Chrome/Firefox中看起来是一样的吗？

javascript html canvas safari

Javascript 如何在<；中绘制对角线；帆布>；在Safari/Chrome/Firefox中看起来是一样的吗？,javascript,html,canvas,safari,Javascript,Html,Canvas,Safari,在支持HTML5的浏览器中，此代码绘制了一条对角线： <!DOCTYPE html><html><body><script> var canvas = document.createElement('canvas'); canvas.width = 100; canvas.height = 100; var ctx = canvas.getContext('2d'); ctx.strokeStyle = 'black'; ctx.beginPath

在支持HTML5的浏览器中，此代码绘制了一条对角线：

<!DOCTYPE html><html><body><script>
var canvas = document.createElement('canvas');
canvas.width = 100;
canvas.height = 100;
var ctx = canvas.getContext('2d');
ctx.strokeStyle = 'black';
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.lineWidth = 1;
ctx.stroke();
document.body.appendChild(canvas);
</script></body></html>


var canvas=document.createElement（'canvas'）；
画布宽度=100；
画布高度=100；
var ctx=canvas.getContext（'2d'）；
ctx.strokeStyle=‘黑色’；
ctx.beginPath（）；
ctx.moveTo（0,0）；
ctx.lineTo（100100）；
ctx.lineWidth=1；
ctx.stroke（）；
document.body.appendChild（画布）；

但是，在Safari中，渲染效果看起来截然不同：

（Chrome 49.0、Firefox 45.0、Safari 9.0从左到右）

也就是说，在Safari中，线条看起来是其他线条的两倍厚

我能做些什么使这三种浏览器中的行看起来完全相同吗？

这种差异是由浏览器对您的行进行反别名的不同方式造成的。

您不能在canvas元素上过度使用或关闭抗锯齿功能，所以您只能在浏览器中使用不同的线条渲染

唯一可靠的解决方法是逐像素绘制自己的线条。可以使用创建线

下面是示例代码和演示：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var imgData=ctx.getImageData（0，0，canvas.width，canvas.height）；
var数据=imgData.data；
bresnehamLine（25,25250125）；
ctx.putImageData（imgData，0,0）；
函数设置像素（x，y）{
变量n=（y*canvas.width+x）*4；
数据[n]=0；
数据[n+1]=0；
数据[n+2]=255；
数据[n+3]=255；
}
//归属：https://www.cs.helsinki.fi/group/goa/mallinnus/lines/bresenh.html
函数bresnehamLine（x0，y0，x1，y1）{
var dx=数学绝对值（x1-x0），
sx=x0dy？dx:-dy）/2；
while（true）{
变量n=（y0*画布宽度+x0）*4；
数据[n]=0；
数据[n+1]=0；
数据[n+2]=255；
数据[n+3]=255；
如果（x0==x1&&y0==y1）中断；
var e2=错误；
如果（e2>-dx）{
err-=dy；
x0+=sx；
}
if（e2


body{背景色：象牙；}
#画布{边框：1px纯红；边距：0自动；}
这种差异是由浏览器对您的线路进行反别名的不同方式造成的。
您不能在canvas元素上过度使用或关闭抗锯齿功能，所以您只能在浏览器中使用不同的线条渲染
唯一可靠的解决方法是逐像素绘制自己的线条。可以使用创建线
下面是示例代码和演示：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var imgData=ctx.getImageData（0，0，canvas.width，canvas.height）；
var数据=imgData.data；
bresnehamLine（25,25250125）；
ctx.putImageData（imgData，0,0）；
函数设置像素（x，y）{
变量n=（y*canvas.width+x）*4；
数据[n]=0；
数据[n+1]=0；
数据[n+2]=255；
数据[n+3]=255；
}
//归属：https://www.cs.helsinki.fi/group/goa/mallinnus/lines/bresenh.html
函数bresnehamLine（x0，y0，x1，y1）{
var dx=数学绝对值（x1-x0），
sx=x0dy？dx:-dy）/2；
while（true）{
变量n=（y0*画布宽度+x0）*4；
数据[n]=0；
数据[n+1]=0；
数据[n+2]=255；
数据[n+3]=255；
如果（x0==x1&&y0==y1）中断；
var e2=错误；
如果（e2>-dx）{
err-=dy；
x0+=sx；
}
if（e2

body{背景色：象牙；}
#画布{边框：1px纯红；边距：0自动；}