javascript 从上下文中获取画布大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16531327/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get canvas size from its context
提问by scrblnrd3
I'm building a few libraries for canvas graphing in javascript, and I was wondering if there was any way to get the size of the canvas from it's 2D context. I was looking for something like this.
我正在为 javascript 中的画布绘图构建一些库，我想知道是否有任何方法可以从它的 2D 上下文中获取画布的大小。我正在寻找这样的东西。
var size=ctx.size;
scale=size/100;
There are multiple canvas elements here, so I can't do canvas.width.
Thanks
这里有多个画布元素，所以我不能做canvas.width。
谢谢
回答by
Yes you can. It's a bit deeper than you might be used to;
是的你可以。它比您习惯的要深一些；
var sizeWidth = ctx.canvas.clientWidth;
var sizeHeight = ctx.canvas.clientHeight;
var scaleWidth = sizeWidth/100;
var scaleHeight = sizeHeight/100;
A common example of the Canvas context object;
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
And the HTMLCanvasElement inside it;
以及其中的 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
