LoginSignup
1
1

More than 5 years have passed since last update.

Obnize canvas ctx を for in してみる

Last updated at Posted at 2018-06-10

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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1