HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布的高度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候,在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。
画布的宽度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候,在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。
方法 | 描述 |
---|---|
getContext() | 返回一个用于在画布上绘图的环境。 |
规定元素的 id、宽度和高度:
- <canvas id="myCanvas" width="200" height="100"></canvas>
通过 JavaScript 来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:
- <script type="text/javascript">
- var c=document.getElementById("myCanvas");
- var ccxt=c.getContext("2d");
- cxt.fillStyle="#FF0000";
- cxt.fillRect(0,0,150,75);
- </script>
JavaScript 使用 id 来寻找 canvas 元素:
- var c=document.getElementById("myCanvas");
然后,创建 context 对象: var cxt=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形: cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75); fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。理解坐标
上面的 fillRect 方法拥有参数 (0,0,150,75)。意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。如下图所示,画布的 X 和 Y 坐标用于在画布上对绘画进行定位。
包括前几篇DEMO都涉及了大量的坐标,那这些坐标是如何准备得到的呢,我们实际开发如何得到我们想要的坐标点?下面给出一个获取canvas坐标点的DEMO:
- <!DOCTYPE HTML>
- <html>
- <head>
- <style type="text/css">
- body
- {
- font-size:70%;
- font-family:verdana,helvetica,arial,sans-serif;
- }
- </style>
- <script type="text/javascript">
- function cnvs_getCoordinates(e)
- {
- x=e.clientX;
- y=e.clientY;
- document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
- }
- function cnvs_clearCoordinates()
- {
- document.getElementById("xycoordinates").innerHTML="";
- }
- </script>
- </head>
- <body style="margin:0px;">
- <p>把鼠标悬停在下面的矩形上可以看到坐标:</p>
- <div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
- <br />
- <br />
- <br />
- <div id="xycoordinates"></div>
- </body>
- </html>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。