h5 canvas 小球移动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript" src="../js/jquery.min.js"></script>

    <script type="text/javascript">

        $().ready(function () {

            var d=$("#cans").get(0).getContext("2d");

            var dir=0;

            var width=500;

            var height=200;

            var exp=1;  //像素移动的位置，正数向下，负数向上

            function test(){

//                $("#res").get(0).innerText+=123;

                d.clearRect(0,0,width,height)//清除原始图形

//                画圆

                d.fillStyle="red";

                d.beginPath(); // 从新开始画，防止 冲突重叠

                d.arc(50,dir,20,0,Math.PI*2,true); // x y 坐标 半径130

//                d.arc(50,dir,dir,0,Math.PI*2,true); //  半径为dir 也慢慢变大

                d.closePath(); // 结束画布，防止冲突重叠

                d.fill(); // 结束渲染

                dir+=exp;

//                上下移动

                if(dir==0 || dir==height){

                    exp*=-1;

                }

            }

            var tt;

            $("#bt1").bind('click', function () {

                 tt=setInterval(test,20);

            });

            $("#bt2").bind('click', function () {

                clearInterval(tt);

            })

        });

    </script>

</head>

<body>

<canvas id="cans" width="500" height="200">浏览器不支持canvas</canvas>

<div id="res"></div>

<button id="bt1">开始</button>

<button id="bt2">停止</button>

</body>

</html>

h5 canvas 小球移动的更多相关文章

  1. H5 canvas绘制出现模糊的问题

    在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...

  2. h5 canvas 画图

    h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  3. js+canvas(H5)实现小球移动小demo

    *canvas提供画布,大小自定义,js得到画布,从画布对象通过getContext('2d')来得到画笔,然后就可以开始画了 代码: <!DOCTYPE html> <html l ...

  4. H5 canvas 小demo之小球的随机运动

    1:结构之html----balls.html <!DOCTYPE html> <html> <head lang="en"> <meta ...

  5. canvas小球动画原理

    随着html5发展,canvas标签作为h5革命性的发展标志也越来越流行.canvas标签的强大之处,不仅在于它可以作为一个独立的画布,也可以利用canvas做一些动画而不用导入flash文件.同时, ...

  6. canvas小球

      小球碰撞效果是采用面向对象的方式写的,在小球的构造器里包含了小球的属性值,大小,移动速度,半径大小以及颜色. 在小球的原型方法里,添加了小球运动的方法,当小球碰撞到屏幕边界的时候进行反弹. 小球是 ...

  7. H5 canvas填充文字自动换行

    canvas是H5中非常重要,非常常用,也是非常强大的一个新标签,美中不足的事,canvas中没没有自动换行的属性,我的第一反应是,字符串截取,然后计算每行的距离来实现自动换行.. 然后百度了一下,已 ...

  8. h5 canvas

    概述 Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap). 使用前,首先需要新建一个canvas网页元素. & ...

  9. H5 canvas圆形的时钟

    今天用H5中的canvas标签做一个时钟,H5中有很多好用的新增标签,真的很不错. 1.canvas标签介绍 <canvas> 标签定义图形,比如图表和其他图像,你必须使用脚本来绘制图形. ...

随机推荐

  1. emmet使用 及 notepadd++ emmet的安装

    emmet的使用的参考文章:http://www.cnblogs.com/sussski/p/3544744.html html:4s.html:4t.html:5或! +.>.^:层次 *.@ ...

  2. mysql 出现错误Incorrect file format

    REPAIR TABLE xx_messages USE_FRM;

  3. Java设计原则：面向接口的设计

    前言:在一个面向对象的系统中,系统的各种功能是由许许多多的不同对象协作完成的.在这种情况下,各个对象内部是如何实现对系统设计人员来说就不那么重要:而各个对象之间的协作关系则成为系统设计的关键.小到不同 ...

  4. 转：this的用法

    this指针的含义及其用法: 1. this指针是一个隐含于每一个成员函数中的特殊指针.它指向正在被该成员函数操作的那个对象.2. 当对一个对象调用成员函数时,编译程序先将对象的地址赋给this指针, ...

  5. centos linux从无到有安装wordpress

    序:本博客从无到有搭建wordpress,包括从服务器和域名购买,会将步骤一步一步记录下来.如果你也是新手,那你有福了,因为我的系统是centos,对号入座啊. 目录 一.准备域名和服务器一.安装ph ...

  6. hdu 5183. Negative and Positive （哈希表）

    Negative and Positive (NP) Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 65536/65536 K (Ja ...

  7. users

    NAME users - print the user names of users currently logged in to the current host SYNOPSIS users [O ...

  8. abstract class和interface的区别

    1. 引言 2. 概念引入 ●什么是接口? 接口是包含一组虚方法的抽象类型,其中每一种方法都有其名称.参数和返回值.接口方法不能包含任何实现,CLR允许接口可以包含事件.属性.索引 器.静态方法.静态 ...

  9. Merge Two Sorted Arrays

    Merge two given sorted integer array A and B into a new sorted integer array. Example A=[1,2,3,4] B= ...

  10. 【leetcode】Best Time to Buy and Sell Stock II

    Best Time to Buy and Sell Stock II Say you have an array for which the ith element is the price of a ...