html safari错误,javascript – [Safari / Chrome致命错误] HTML5画布不适用于特定情况,但Firefox表现不错...

我使用html5 canvas来构建功能图软件.

有一个严重的错误,但我不知道发生了什么.

也就是说,当我打电话时：

yOFxGraph(plotFUNCinputYofX,-4,5,-4,4,"rgb(66,44,255)",1);

在Mac上的Firefox26 / Chrome32 / Safari7中一切正常.

但是,当我只更改一个小参数时,如：

yOFxGraph(plotFUNCinputYofX,-5,5,-4,4,"rgb(66,44,255)",1);

该图表在Chrome / Safari中消失,但在Firefox中仍能正常运行.

整个代码如下,请您告诉我如何解决？非常感谢你.

这个错误怎么会发生在主流浏览器上呢？无论代码如此简单.

function plotFUNCinputYofX(x) {return 1/Math.sin(x);}

function draw() {

yOFxGraph(plotFUNCinputYofX,-4,5,-4,4,"rgb(66,44,255)",1);

}

function yOFxGraph (func,xFrom,xTo,yFrom,yTo,color,thick) {

var canvas = document.getElementById("canvas");

var ctx=canvas.getContext("2d");

ctx.lineWidth = thick;

ctx.strokeStyle = color;

var Xunit = canvas.width/(xTo-xFrom);

var Yunit = canvas.height/(yTo-yFrom);

var samplingX=(xTo-xFrom)/400;/*I only sample 400 points whatever the scale is.*/

var xx = xFrom;

ctx.beginPath();

ctx.moveTo(0 , canvas.height-(func(xx)-yFrom)*Yunit);

function pivoting(){

xx+=samplingX;

ctx.lineTo((xx-xFrom)*Xunit , canvas.height-(func(xx)-yFrom)*Yunit);

}

if(xFrom

else if(xFrom>xTo){while(xx>xTo){pivoting()}}

ctx.stroke();

}

解决方法:

似乎您发现浏览器在绘制时处理无穷大(或可能是巨大的值)的方式有所不同.

首先,让我们注意,通过使用-5到5,你允许精确值x = 0,这会导致1 / sin(0)即无穷大(或者有一些浮点舍入误差,可能是一个非常正或负的值) .

FireFox显然忽略了这一点.也许它忽略了这一点,但继续冲击线的其余部分,好像它不在那里,或者它可能将它留在线上(我会考虑NaNs的正确,直观的行为).

但是在Chrome和Safari中,这个无穷大或巨大的数字会导致整个笔画变得无效,因此它不会绘制任何笔画.

简单的解决方法是确保您的价值是理智的.这是一个将其限制在边界的检查:(您可能希望使用更宽的边界,或以不同的方式处理屏幕外)

var yy = func(xx);

if(!(yy>yFrom))yy=yFrom;

if(!(yy

ctx.lineTo((xx-xFrom)*Xunit , canvas.height-(yy-yFrom)*Yunit);

我已经确认这可以解决您在Chrome中遇到的问题.我认为它也适用于Safari.

标签：javascript,html5,google-chrome,canvas,safari

来源： https://codeday.me/bug/20190703/1366317.html