canvas教程

HTML5 Canvas 图像动画的实现(实例小球弹跳)

字号+ 作者:H5之家 来源:H5之家 2017-02-05 17:03 我要评论( )

Canvas 中 clearRect 清除函数 var cdocument.getElementById(php100); var p100c.getContext(2d); p100.clearRect(x,y,x,y) // 擦除画布一个区域xy、xy 代码如

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title></title>


</head>

<body>

<canvas></canvas>

<div></div>

<script type="text/javascript">

var canvas = document.getElementById("php100");

var p100 = canvas.getContext("2d");

var dir = 100;

var height = 500;

var width = 300;

var exp = 1;//像素移动的位置

function fff()

{

p100.clearRect(0,0,height,width);//清除上一次的痕迹

p100.fillStyle = "red";

p100.beginPath();

p100.arc(190, dir, 20, 0, Math.PI * 2, 1);

p100.closePath();

p100.fill();

dir = dir + exp;

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

{

exp = exp * -1;

}

}

</script>

<button>开始</button>

<button >停止</button>

</body>

</html>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5音乐可视化

    HTML5音乐可视化

    2017-02-05 16:02

  • 免费HTML5在线教程

    免费HTML5在线教程

    2017-02-05 10:01

  • 使用HTML5 Canvas API控制字体的显示与渲染的方法

    使用HTML5 Canvas API控制字体的显示与渲染的方法

    2017-02-05 09:00

  • 百家乐网:Android编程实现canvas绘制柱状统计图功能【自动计算宽高及分度值、可左右滑动】

    百家乐网:Android编程实现canvas绘制柱状统计图功能【自动计算宽高及

    2017-02-05 08:05

网友点评
h