javascript - 从上下文中获取 Canvas 大小

Question

我正在用 javascript 构建一些用于 Canvas 绘图的库，我想知道是否有任何方法可以从 2D 上下文中获取 Canvas 的大小。我正在寻找类似的东西。

var size=ctx.size;
scale=size/100;

这里有多个canvas元素，所以我不能做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