Jquery +html5

最新推荐文章于 2024-10-06 12:06:31 发布

原创最新推荐文章于 2024-10-06 12:06:31 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #html5 #function #chrome #算法

编程语言专栏收录该内容

76 篇文章

订阅专栏

本文通过Rob Hawkes的《Foundation HTML5 Canvas》一书中的实例，深入探讨了如何利用jQuery选择器操作HTML5 Canvas，实现基本的图形绘制，并解决在不同浏览器中获取Canvas元素的问题。此外，还展示了如何使用Canvas的画图功能进行简单的几何形状绘制，为读者提供了丰富的实践经验和技巧。

这两天没啥好看的。就来玩下html5吧。

看的书是 rob hawkes 的Foundation HTML5 Canvas

做js已经离不开jquery。

下面是书中jquery的一个例子

$(document).ready(function() {
// Put the JavaScript you want to run after the page loads in here
});

美元符号可能是jquery中的一种方法。书中说这个叫做选择器，允许你选择DOM中的一个元素。

再比如

var canvas = $("#myCanvas");//这个代码上次发现无法获得canvas，后来发现javascript代码要放在canvas标签后面 2012-5-4
var context = canvas.get(0).getContext("2d");

jquery的第一个方便的地方就是这个选择器。

然后就是对这个context的各种涂鸦了。这个学生应该会有兴趣。比算法和ui设计有趣多了。--2012-3-16

上面的代码今天试了下，无法获取到canvas。chrome，ie9都不行。

改成如下的代码

var canvas = $(document).get(0).getElementById("MyCanvas"); 可以获取到canvas。

用canvas的画图功能，可以用简单的几何形状画图。

如图：

代码如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.6.js"></script>
<script type="text/javascript">
      $(document).ready(function () {
           var canvas = $(document).get(0).getElementById("MyCanvas");

          if (canvas.getContext) {
              var ctx = canvas.getContext("2d");
              ctx.fillRect(120, 0, 100, 100);
              ctx.fillStyle = "red";
              ctx.beginPath();
              ctx.arc(145, 40, 10, 0, Math.PI * 2, false);
              ctx.closePath();
              ctx.fill();
              ctx.beginPath();
              ctx.arc(195, 40, 10, 0, Math.PI * 2, false);
              ctx.closePath();
              ctx.fill();
              ctx.beginPath();
              ctx.arc(170, 50, 20, Math.PI*0.25, Math.PI *0.75, false);
              ctx.closePath();
              ctx.fill();

              }
      });
</script>
</head>
<body >
      <div>
        <canvas id="MyCanvas" width="500" height="500" > </canvas>
      </div>
</body>
</html>

2012-4-11