使用canvas属性时发生此问题。
我尝试使用canvas属性在native native中创建轮盘赌。我成功使用了canvas,但我不能使用ctx.drawImage
方法。当我尝试使用它们时,我收到了类似
JSON.Stringify无法序列化循环结构
这是一个代码snipet
componentDidMount(){
wheelCanvas = this.updateCanvas();
}
// This is in error while rendering :
ctx.drawImage(wheelCanvas, wheelCanvas.width / 2, wheelCanvas.height / 2);
updateCanvas() {
var outsideRadius = 120;
var textRadius = 100;
var insideRadius = 30;
var canvas = this.refs.canvasRoulette;
let ctx = canvas.getContext("2d");
canvas.width = canvas.height = outsideRadius * 2 + 6;
var x = outsideRadius + 3;
var y = outsideRadius + 3;
ctx.font = "bold 18px Helvetica, Arial";
for (var i = 0; i < rouletteSize; i++) {
var angle = i * arc;
ctx.fillStyle = colors[i];
ctx.beginPath();
ctx.arc(x, y, outsideRadius, angle, angle + arc, false);
ctx.arc(x, y, insideRadius, angle + arc, angle, true);
ctx.strokeStyle = "#fff";
ctx.lineWidth = 1;
ctx.stroke();
ctx.fill();
ctx.save();
ctx.shadowOffsetX = -1;
ctx.shadowOffsetY = -1;
ctx.shadowBlur = 0;
ctx.shadowColor = "rgb(220,220,220)";
ctx.fillStyle = "#fff";
ctx.translate(
x + Math.cos(angle + arc / 2) * textRadius,
y + Math.sin(angle + arc / 2) * textRadius
);
ctx.rotate(angle + arc / 2 + Math.PI);
var text = numbers[i];
ctx.fillText(text, -ctx.measureText(text).width / 2, 5);
ctx.restore();
}
return canvas;
}