Pobierz rozmiar obszaru roboczego z kontekstu.

Question

Buduję kilka bibliotek graficznych na płótnie w javascript. Zastanawiałem się, czy istnieje jakiś sposób na uzyskanie rozmiaru płótna z jego kontekstu 2D. Szukałem czegoś takiego.

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

Tutaj jest wiele elementów canvas, więc nie mogę zrobić canvas.width.
Dzięki

Answer 1

Tak, możesz. To jest trochę głębsze niż do tej pory;

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

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

Typowy przykład kontekstowego obiektu 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 

I wewnątrz obiektu 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