html中的高和宽背景色怎么写,HTML 5中画布的宽度和高度

精慕HU

这个canvasDOM元素.height和.width属性对应于height="…"和width="…"属性。将它们设置为JavaScript代码中的数值，以调整画布的大小。例如：var canvas = document.getElementsByTagName('canvas')[0];canvas.width  = 800;canvas.height = 600;请注意，这清除了画布，尽管您应该使用ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height);来处理那些不完全清除画布的浏览器。在更改大小后，您需要重新绘制任何您想要显示的内容。请进一步注意，高度和宽度是用于绘图的逻辑画布尺寸，异类从style.height和style.widthCSS属性如果不设置CSS属性，画布的内部大小将用作其显示大小；如果确实设置了CSS属性，并且它们与画布尺寸不同，则将在浏览器中缩放内容。例如：// Make a canvas that has a blurry pixelated zoom-in// with each canvas pixel drawn showing as roughly 2x2 on screencanvas.width  = 400;canvas.height = 300; canvas.style.width  = '800px';canvas.style.height = '600px';看见这个活生生的例子把画布放大4倍的画布。var c = document.getElementsByTagName('canvas')[0];var ctx = c.getContext('2d');ctx.lineWidth   = 1;ctx.strokeStyle = '#f00';ctx.fillStyle   = '#eff';ctx.fillRect(  10.5, 10.5, 20, 20 );ctx.strokeRect( 10.5, 10.5, 20, 20 );ctx.fillRect(   40, 10.5, 20, 20 );ctx.strokeRect( 40, 10.5, 20, 20 );ctx.fillRect(   70, 10, 20, 20 );ctx.strokeRect( 70, 10, 20, 20 );ctx.strokeStyle = '#fff';ctx.strokeRect( 10.5, 10.5, 20, 20 );ctx.strokeRect( 40, 10.5, 20, 20 );ctx.strokeRect( 70, 10, 20, 20 );body { background:#eee; margin:1em; text-align:center }canvas { background:#fff; border:1px solid #ccc; width:400px; height:160px }

Showing that re-drawing the same antialiased lines does not obliterate old antialiased lines.

0

0