Edited at

Obnize canvas ctx を for in してみる

More than 1 year has passed since last update.

Obnizでcanvasを使うときに下記のような書き方で最後に obniz.display.draw(ctx); というコードが入るのだけれど、もしかして、Obnizのcanvasが特殊なのか、あるいは canvas 自体は普通で、display.draw は Obnizへ投げるためだけのメソッドなのかとか少し気になって canvas を forin してみた。

<canvas id=canvas></canvas>

<script>

const ctx = $("#canvas")[0].getContext('2d');
let obniz = new Obniz("OBNIZ_ID_HERE");

obniz.onconnect = async function () {
obniz.display.clear();
ctx.fillStyle = "white";
ctx.font = "30px sans-serif";
ctx.fillText('漢字', 0, 40);

obniz.display.draw(ctx);
}

</script>


下記のコードでfor in します。

<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/obniz@1.4.3/obniz.js" crossorigin="anonymous"></script>
</head>
<body>

<div id="obniz-debug"></div>
<h1>obniz canvas ctx for in</h1>

<canvas id=hoge></canvas>

<script>

const canvas = document.getElementById("hoge")
const ctx = canvas.getContext('2d');
let obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {

let list=''
for(let i in ctx){
list+='<br><strong>'+i+':</strong> '+ctx[i]
}
console.log(list)
}

</script>
</body>
</html>


結果

これは、実行したブラウザChrome バージョン: 66.0.3359.181(Official Build) (64 ビット) のforin結果と同じでした。ちゃんちゃん。

canvas: [object HTMLCanvasElement]
globalAlpha: 1
globalCompositeOperation: source-over
filter: none
imageSmoothingEnabled: true
imageSmoothingQuality: low
strokeStyle: #000000
fillStyle: #000000
shadowOffsetX: 0
shadowOffsetY: 0
shadowBlur: 0
shadowColor: rgba(0, 0, 0, 0)
lineWidth: 1
lineCap: butt
lineJoin: miter
miterLimit: 10
lineDashOffset: 0
font: 10px sans-serif
textAlign: start
textBaseline: alphabetic
save: function save() { [native code] }
restore: function restore() { [native code] }
scale: function scale() { [native code] }
rotate: function rotate() { [native code] }
translate: function translate() { [native code] }
transform: function transform() { [native code] }
setTransform: function setTransform() { [native code] }
resetTransform: function resetTransform() { [native code] }
createLinearGradient: function createLinearGradient() { [native code] }
createRadialGradient: function createRadialGradient() { [native code] }
createPattern: function createPattern() { [native code] }
clearRect: function clearRect() { [native code] }
fillRect: function fillRect() { [native code] }
strokeRect: function strokeRect() { [native code] }
beginPath: function beginPath() { [native code] }
fill: function fill() { [native code] }
stroke: function stroke() { [native code] }
drawFocusIfNeeded: function drawFocusIfNeeded() { [native code] }
clip: function clip() { [native code] }
isPointInPath: function isPointInPath() { [native code] }
isPointInStroke: function isPointInStroke() { [native code] }
fillText: function fillText() { [native code] }
strokeText: function strokeText() { [native code] }
measureText: function measureText() { [native code] }
drawImage: function drawImage() { [native code] }
getImageData: function getImageData() { [native code] }
putImageData: function putImageData() { [native code] }
createImageData: function createImageData() { [native code] }
setLineDash: function setLineDash() { [native code] }
getLineDash: function getLineDash() { [native code] }
closePath: function closePath() { [native code] }
moveTo: function moveTo() { [native code] }
lineTo: function lineTo() { [native code] }
quadraticCurveTo: function quadraticCurveTo() { [native code] }
bezierCurveTo: function bezierCurveTo() { [native code] }
arcTo: function arcTo() { [native code] }
rect: function rect() { [native code] }
arc: function arc() { [native code] }
ellipse: function ellipse() { [native code] }

では、次に通常の canvas 処理のテストに入ります。

https://qiita.com/toshirot/items/fe596aeb12e9a78ba408