html5学习-简单的Ball

最新推荐文章于 2021-06-19 01:44:01 发布

weixin_30663471

最新推荐文章于 2021-06-19 01:44:01 发布

阅读量164

点赞数

文章标签：开发工具

原文链接：http://www.cnblogs.com/djyxmlauto/archive/2012/05/18/2507249.html

版权

本事是html5初学者，刚刚开始学习html5，请朋友们多多指教

最好的开发工具是文档编辑器 editplus 和 www.w3school.com.cn

本文中的例子来源于网络非本人所写，代码加上一些注释，方便向我这样的初学者快速学习。

最好的方法是照着demo敲打一边，碰到不懂的地方百度，查资料。

本文中例子是canvas 绘画简单的圆形在一个矩形内运动

<!DOCTYPE html >
<html>
<head>
    <style>
        body
        {
            margin: 0;
            position: absolute;
            width: 100%;
            height: 100%;
        }
        canvas
        {
            display: block;
            margin: 20px auto;
            border: 2px solid #333;
        }
    </style>

    <script>
        var BounceBall = function() {
            var ctx, W, H, dx = 2, dy = 4, x = 200, y = 200;
            var init = function(id) {
                var canvas = document.getElementById(id);
                /*
                参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。
                提示：在未来，如果 <canvas> 标签扩展到支持 3D 绘图，getContext() 方法可能允许传递一个 "3d" 字符串参数。
                返回值 一个 CanvasRenderingContext2D 对象，使用它可以绘制到 Canvas 元素中。            
                */
                ctx = canvas.getContext('2d');
                W = canvas.width || 300;
                H = canvas.height || 300;
                this.run(); ///自定义方法
            }
            init.prototype = {
                run: function() {
                    var _this = this;
                    this.st = setInterval(function() { _this.draw(); }, 50)
                },
                draw: function() {
                    this.clear();
                    this.circle(x, y, 8);
                    if (x + dx > W || x + dx < 0) dx = -dx;
                    if (y + dy > H || y + dy < 0) dy = -dy;
                    x += dx;
                    y += dy;
                    console.log(x, ' ', y, ' ', W, ' ', H, ' ');
                },
                clear: function() {
                    /*
                    clearRect() 方法删除一个画布的矩形区域方法
                    擦除了指定的矩形，并且用一个透明的颜色填充它。
                    clearRect(x, y, width, height)
                    参数 描述
                    x, y 矩形的左上角的坐标。 
                    width, height 矩形的尺寸                
                    */
                    ctx.clearRect(0, 0, W, H);
                },
                circle: function(x, y, r) {
                    /*
                    beginPath() 丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0)。
                    当一个画布的环境第一次创建，beginPath() 方法会被显式地调用。            
                    */
                    ctx.beginPath();
                    /*
                    arc() 方法使用一个中心点和半径，为一个画布的当前子路径添加一条弧
                    arc(x, y, radius, startAngle, endAngle, counterclockwise)         
                    参数 描述 
                    x, y 描述弧的圆形的圆心的坐标。 
                    radius 描述弧的圆形的半径。 
                    startAngle, endAngle 沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来衡量。
                    沿着 X 轴正半轴的三点钟方向的角度为 0，角度沿着逆时针方向而增加。
                    counterclockwise 弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历。                          
                    */
                    ctx.arc(x, y, r, 0, Math.PI * 2, true);
                    ctx.closePath();
                    //使用指定颜色、渐变或模式来绘制或填充当前路径的内部。
                    ctx.fill();
                },
                rect: function(x, y, w, h) {
                    ctx.beginPath();
                    /*
                    方法为当前路径添加一条矩形子路径
                    参数 描述 
                    x, y 矩形的左上角的坐标。 
                    width, height 矩形的大小。                 
                    描述 rect() 方法为路径添加了一个矩形。这个矩形是路径的一个子路径并且没有和路径中的任何其他子路径相连。
                    当 rect() 方法返回时，当前位置是 (0,0)。                
                    */
                    ctx.rect(x, y, w, h);
                    ctx.closePath();
                    ctx.fill();
                }
            }
            return init;
        } ();
        onload = function() {
            new BounceBall('canvas');
        }

    </script>

</head>
<body>
    <div>
    </div>
    <canvas id="canvas" width="200" height="200">Your Broswer don't support html5 canvas</canvas>
</body>
</html>

<script>
    /*
    CanvasRenderingContext2D 对象的方法
    方法 描述 
    arc() 用一个中心点和半径，为一个画布的当前子路径添加一条弧线。 
    arcTo() 使用目标点和一个半径，为当前的子路径添加一条弧线。 
    beginPath() 开始一个画布中的一条新路径（或者子路径的一个集合）。 
    bezierCurveTo() 为当前的子路径添加一个三次贝塞尔曲线。 
    clearRect() 在一个画布的一个矩形区域中清除掉像素。 
    clip() 使用当前路径作为连续绘制操作的剪切区域。 
    closePath() 如果当前子路径是打开的，就关闭它。 
    createLinearGradient() 返回代表线性颜色渐变的一个 CanvasGradient 对象。 
    createPattern() 返回代表贴图图像的一个 CanvasPattern 对象。 
    createRadialGradient() 返回代表放射颜色渐变的一个 CanvasGradient 对象。 
    drawImage() 绘制一幅图像。 
    fill() 使用指定颜色、渐变或模式来绘制或填充当前路径的内部。 
    fillRect() 绘制或填充一个矩形。 
    lineTo() 为当前的子路径添加一条直线线段。 
    moveTo() 设置当前位置并开始一条新的子路径。 
    quadraticCurveTo() 为当前路径添加一条贝塞尔曲线。 
    rect() 为当前路径添加一条矩形子路径。 
    restore() 为画布重置为最近保存的图像状态。 
    rotate() 旋转画布。 
    save() 保存 CanvasRenderingContext2D 对象的属性、剪切区域和变换矩阵。 
    scale() 标注画布的用户坐标系统。 
    stroke() 沿着当前路径绘制或画一条直线。 
    strokeRect() 绘制（但不填充）一个矩形。 
    translate() 转换画布的用户坐标系统。         
    */
</script>