canvas.width,canvas.height

　　最近因为工作需要，学习了Html中的Canvas标签。

　　Canvas是HTML5的新组件。它就像一个幕布，你可以在上面绘制各种图表、动画等。用JavaScript。

　　在没有画布的时代，绘图只能借助Flash插件来实现，页面要和JavaScript、Flash交互。有了Canvas，我们就不再需要Flash了，可以直接用JavaScript来完成绘制。

　　当我看了教程，自己写了一个hello world的时候，麻烦出现了。请看下面的代码：

　　！DOCTYPE html html lang= en body canvas id= can vas 1 style= width:200 px；高度：200px边框：1px纯黑；/canvas script var oC=document . getelementbyid( can vas 1 )；var CTX=oc . get context( 2d )；ctx.moveTo(0，0)；ctx.lineTo(200，200)；CTX . stroke()；/script/body/html上面代码的意思是在宽高200px的画布上画一条直线。直线的起点为(0，0)，终点为(200，200)；

　　但是，浏览器绘制的图像是：

　　看这张图~为什么是这样的坡？应该不是~应该是对角线~ ~

　　后来从资料中了解到，在画布标签上设置宽度和高度时，有以下几种方式和后果：

　　默认情况下，Canvas元素宽300像素，高150像素。以下方法可用于设置其宽度和高度：

　　方法1:

　　1画布宽度=500 高度= 500 $ ampamp$ lt/画布

　　方法二：使用HTML5 Canvas API进行操作。

　　1 var canvas=document . getelementbyid(操作画布的id )；

　　2 canvas.width=500

　　3 canvas.width=500

　　如果通过以下方法设置宽度和高度，画布元素将从原始大小拉伸到设置的宽度和高度：

　　方法一：CSS会被拉伸。

　　1 #待操作画布的id {

　　2宽度：1000px

　　3高度：1000px

　　4 }

　　行间样式中的Style= 也包括在内。即使在上面的例子中，拉伸也会发生。

　　方法二：使用HTML5 Canvas API的操作会被拉伸。

　　1 var canvas=document . getelementbyid(操作画布的id )；

　　2 canvas . style . width= 1000 px ；

　　3 canvas . style . height= 1000 px ；

　　方法3:使用$(#id )。jquery的宽度(500)；会被拉长。

　　其他：画布的宽度和高度不能用百分比表示。Canvas将百分比值显示为数值。

　　所以从上面的信息可以知道，原因是我上面例子中的代码会拉伸canvas的宽度和高度，从而使图像与预期的不一致。

　　现在我已经重写了一个代码示例，它正确地设置了画布的宽度和高度：

　　！DOCTYPE HTMLhtmlbodycanvas id= my canvas width= 200 height= 200 style= border:1px纯黑；您的浏览器不支持画布元素。/canvasscript type= text/JavaScript var c=document . getelementbyid( my canvas )；var cxt=c . get context( 2d )；cxt.moveTo(0，0)；cxt.lineTo(200，200)；cxt . stroke()；/script/body/html结果：

　　结束。

　　总结

　　这就是本文的全部内容。希望这篇文章的内容对你的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。