Lấy kích thước canvas từ ngữ cảnh của nó

Question

Tôi đang xây dựng một vài thư viện để vẽ biểu đồ canvas trong javascript và tôi đã tự hỏi liệu có cách nào để lấy kích thước của canvas từ ngữ cảnh 2D của nó hay không. Tôi đang tìm kiếm một cái gì đó như thế này.

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

Có nhiều phần tử canvas ở đây, vì vậy tôi không thể thực hiện canvas.width.
Cảm ơn

Answer 1

Có thể. Đó là một chút sâu hơn bạn có thể được sử dụng để;

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

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

Ví dụ chung về đối tượng bối cảnh 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 

Và HTMLCanvasElement bên trong nó;

> 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