そのコンテキストからキャンバスサイズを取得する

Question

私は、javascriptでキャンバスグラフのライブラリをいくつかビルドしています。その2Dコンテキストからキャンバスのサイズを取得する方法があるかどうかは疑問でした。私はこのようなものを探していた。

ここには複数のキャンバス要素があるため、canvas.widthを使用できません。
ありがとうございました

Answer 1

はいできます。それはあなたが慣れ親しんでいたより少し深いです。

var sizeWidth = ctx.canvas.clientWidth; 
var sizeHeight = ctx.canvas.clientHeight; 

var scaleWidth = sizeWidth/100; 
var scaleHeight = sizeHeight/100; 

一般的なCanvasコンテキストオブジェクトの例です。

> CanvasRenderingContext2D 
    canvas: HTMLCanvasElement 
    constructor: CanvasRenderingContext2DConstructor 
    fillStyle: "#000000" 
    font: "10px sans-serif" 
    globalAlpha: 1 
    globalCompositeOperation: "source-over" 
    lineCap: "butt" 
    lineJoin: "miter" 
    lineWidth: 1 
    miterLimit: 10 
    shadowBlur: 0 
    shadowColor: "rgba(0, 0, 0, 0)" 
    shadowOffsetX: 0 
    shadowOffsetY: 0 
    strokeStyle: "#000000" 
    textAlign: "start" 
    textBaseline: "alphabetic" 
    webkitBackingStorePixelRatio: 1 
    webkitLineDash: Array[0] 
    webkitLineDashOffset: 0 
    __proto__: CanvasRenderingContext2DPrototype 

内部のHTMLCanvasElement。

> canvas: HTMLCanvasElement 
    accessKey: "" 
    attributes: NamedNodeMap 
    baseURI: "http://fiddle.jshell.net/_display/" 
    childElementCount: 0 
    childNodes: NodeList[0] 
    children: HTMLCollection[0] 
    classList: DOMTokenList 
    className: "" 
    clientHeight: 150 
    clientLeft: 1 
    clientTop: 1 
    clientWidth: 300 
    constructor: HTMLCanvasElementConstructor 
    contentEditable: "inherit" 
    dataset: DOMStringMap 
    dir: "" 
    draggable: false 
    firstChild: null 
    firstElementChild: null 
    height: 150 
    hidden: false 
    id: "c1" 
    innerHTML: "" 
    innerText: "" 
    isContentEditable: false 
    lang: "" 
    lastChild: null 
    lastElementChild: null 
    localName: "canvas" 
    namespaceURI: "http://www.w3.org/1999/xhtml" 
    nextElementSibling: HTMLCanvasElement 
    nextSibling: Text 
    nodeName: "CANVAS" 
    nodeType: 1 
    nodeValue: null 
    offsetHeight: 152 
    offsetLeft: 8 
    offsetParent: HTMLBodyElement 
    offsetTop: 8 
    offsetWidth: 302 
    onabort: null 
    onbeforecopy: null 
    onbeforecut: null 
    onbeforepaste: null 
    onblur: null 
    onchange: null 
    onclick: null 
    oncontextmenu: null 
    oncopy: null 
    oncut: null 
    ondblclick: null 
    ondrag: null 
    ondragend: null 
    ondragenter: null 
    ondragleave: null 
    ondragover: null 
    ondragstart: null 
    ondrop: null 
    onerror: null 
    onfocus: null 
    oninput: null 
    oninvalid: null 
    onkeydown: null 
    onkeypress: null 
    onkeyup: null 
    onload: null 
    onmousedown: null 
    onmousemove: null 
    onmouseout: null 
    onmouseover: null 
    onmouseup: null 
    onmousewheel: null 
    onpaste: null 
    onreset: null 
    onscroll: null 
    onsearch: null 
    onselect: null 
    onselectstart: null 
    onsubmit: null 
    onwebkitfullscreenchange: null 
    onwebkitfullscreenerror: null 
    outerHTML: "<canvas id="c1"></canvas>" 
    outerText: "" 
    ownerDocument: HTMLDocument 
    parentElement: HTMLBodyElement 
    parentNode: HTMLBodyElement 
    prefix: null 
    previousElementSibling: null 
    previousSibling: Text 
    scrollHeight: 150 
    scrollLeft: 0 
    scrollTop: 0 
    scrollWidth: 300 
    spellcheck: true 
    style: CSSStyleDeclaration 
    tabIndex: -1 
    tagName: "CANVAS" 
    textContent: "" 
    title: "" 
    translate: true 
    webkitRegionOverflow: "undefined" 
    webkitdropzone: "" 
    width: 300 
    __proto__: HTMLCanvasElementPrototype