html5画布问题，在原生WebView中反应原生

【问题标题】：Problems with html5 canvas, inside a native WebView in react nativehtml5画布问题，在原生WebView中反应原生
【发布时间】：2018-12-10 23:16:31
【问题描述】：

设置宽度 > 640 和高度 > 100 后，画布中没有任何内容，当网页在原生 Web 视图中呈现时会出现此问题。

//works fine
...
canvas.width  = 640;
canvas.height = 100;
ctx.drawImage(img, 0, 0);
...

//don't  works
...
canvas.width  = 1024;
canvas.height = 768;
ctx.drawImage(img, 0, 0);
...

【问题讨论】：

标签： android react-native canvas webview wkwebview

【解决方案1】：

我解决了这个问题，在加载 DOM 时更改了尺寸，如下面的代码所示

window.onload  =  function()  {
canvas.width  = 1024;
canvas.height = 768;

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0, 300, 300);
};
img.src = "./same_image.jpg";
// ...
};

但是，当我尝试绘制 SVG 图像时，它不起作用。

window.onload  =  function()  {
canvas.width  = 1024;
canvas.height = 768;

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0, 300, 300);
};
img.src = "./same_image.svg";
// ...
};

【讨论】：