支持更多的 Canvas API

[jianming1999]

使用的 Kraken 版本 ｜ What version of kraken are you using

0.7.2

重现步骤 ｜ Steps To Reproduce

重现代码 | Code example:
var canvasDiv = document.createElement('canvas');
canvasDiv.id = 'canvasDiv';
canvasDiv.style.width = '100%';
canvasDiv.style.height = '100%';
document.body.appendChild(canvasDiv);

var ctx = canvasDiv.getContext("2d");
ctx.dispose();
ctx.fillStyle="#FF0000";
// ctx.fillRect(0,0,150,75);
ctx.strokeStyle="#ff0000";

// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

// ctx.moveTo(0,0);
// ctx.lineTo(200,100);
// ctx.stroke();

// ctx.beginPath();
// ctx.arc(95,50,40,0,2*Math.PI);
// ctx.stroke();

预期结果 ｜ Expected results:
程序正常不报错

实际结果 ｜ Actual results:
flutter: NoSuchMethodError: The method 'dispose' was called on null.
Receiver: null
Tried calling: dispose()
#0 Object.noSuchMethod (dart:core-patch/object_patch.dart:51:5)
#1 CanvasElement.dispose (package:kraken/src/dom/tags/canvas.dart:218:21)
#2 ElementManager.disposeEventTarget (package:kraken/src/dom/element_manager.dart:53:17)
#3 flushUICommand (package:kraken/src/bridge/to_native.dart:384:28)
#4 initBridge.. (package:kraken/src/bridge/bridge.dart:42:9)
#5 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1117:15)
#6 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1055:9)
#7 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:971:5)
#8 _rootRun (dart:async/zone.dart:1190:13)
#9 _CustomZone.run (dart:async/zone.dart:1093:19)
#10 _CustomZone.runGuarded (dart:async/zone.dart:997:7)
#11 _invoke (dart:ui/hooks.dart:251:10)
#12 _drawFrame (dart:ui/hooks.dart:209:3)

可用的API：
ctx.direction
ctx.font
ctx.fillStyle
ctx.strokeStyle
ctx.lineCap
ctx.lineDashOffset
ctx.lineJoin
ctx.lineWidth
ctx.miterLimit
ctx.textAlign
ctx.textBaseline
ctx.arc
ctx.arcTo
ctx.beginPath
ctx.bezierCurveTo
ctx.clearRect
ctx.closePath
ctx.clip
ctx.ellipse
ctx.fill
ctx.fillRect
ctx.fillText
ctx.lineTo
ctx.moveTo
ctx.rect
ctx.restore
ctx.resetTransform
ctx.rotate
ctx.quadraticCurveTo
ctx.stroke
ctx.strokeRect
ctx.save
ctx.scale
ctx.strokeText
ctx.setTransform
ctx.transform

不支持的API
ctx.dispose
ctx.drawImage
ctx.createRadialGradient
ctx.toDataURL
…

[andycall]

最近刚加了一些 canvas 的功能，我看你的代码貌似比较老，可以先更新一下 0.7.3 试一下

#71

[jianming1999]

@andycall 我更新到0.7.3了，有些API可以用了，还有下面这些API还不支持
ctx.dispose
ctx.drawImage
ctx.createRadialGradient
ctx.toDataURL

[andycall]

那个报错还有嘛？

[jianming1999]

@andycall ctx.dispose还是会报错，因为你们没有实现这个API

[yuanyan]

这个几个api的确还没有实现，toDataURL 在当前不一定能实现，其他可能还好