| 标题 | HTML5 canvas 元素使用 JavaScript 在网页上绘制图像 |
| 范文 | 创建 Canvas 元素 向 HTML 5 页面添加 canvas 元素。 规定元素的 id、宽度和高度： <canvas id="myCanvas" width="200" height="100"></canvas> 通过 JavaScript 来绘制 canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成： <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script> JavaScript 使用 id 来寻找 canvas 元素： var c=document.getElementById("myCanvas"); 然后，创建 context 对象： HTML 5 从入门到精通-中文学习教程 var cxt=c.getContext("2d"); getContext("2d") 对象是内建的 HTML 5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方 法。 下面的两行代码绘制一个红色的矩形： cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。 理解坐标 上面的 fillRect 方法拥有参数 (0,0,150,75)。 意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。 如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。 实例：把鼠标悬停在矩形上可以看到坐标, 亲自试一试吧，代码如下： <!DOCTYPE HTML> <html> <head> <style type="text/css"> body { font-size:70%; HTML 5 从入门到精通 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> <p>把鼠标悬停在下面的矩形上可以看到坐标：</p> <div id="coordiv" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div> <br /> HTML 5 从入门到精通 <br /> <br /> <div id="xycoordinates"></div> </body> </html> |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。