HTML5 Canvas 图像动画的实现

2019-03-12 12:02|来源: 黄奕能

内容摘要:Canvas 中 clearRect 清除函数;setInterval与clearInterval函数的使用;Canvas做个吹气球效果的动画


1CanvasclearRect清除函数

<canvas id="mycanvas" width="500" height="500></canvas>
Javascript 部分:
var c=document.getElementById("mycanvas");
var p100=c.getContext("2d");
------
p100.clearRect(x,y,x,y) // 擦除画布一个区域x-y、x-y


2CanvasclearRect清除函数

按照指定的周期来调用函数,返回值为定时器的ID值
setInterval(code,millisec) 
取消由setInterval()方法设置的定时器。
clearInterval(idofsetInterval)
 
事件部分:
onclick=“interval=setInterval(draw,5);”
onclick=“clearInterval(interval);”


3Canvas吹气球效果动画实例

<!DOCTYPE html> 
<head> 
<meta charset=utf-8> 
<title>HTML5视频教程-canvas</title>
</head>
<body>
<canvas id="mycanvas" width="500" height="200" ></canvas>
<br>
<script type="text/javascript">
 var canvas = document.getElementById('mycanvas');
 var p100=canvas.getContext("2d");
 var dir=0;
 var width=500;
 var height=200;
 //像素移动的位置,正数向下,负数向上
 var exp=1; 
  
function fff(){
    // 擦除画布一个区域xy、xy
    p100.clearRect(0,0,width,height);
    //定义颜色
    p100.fillStyle="red";
    //从新开始画,防止冲突重叠
    p100.beginPath();                       
    p100.arc(180,dir,dir,0,Math.PI*2,1); 
    //结束画布,防止冲突重叠
    p100.closePath();
    //结束渲染
    p100.fill();
    dir=dir+exp;
    if(dir==0 || dir==height){
        exp=exp*-1; //掉头位置
    }  
 }
</script>
<button onclick="tt=setInterval(fff,20);">开始</button>
<button onclick="clearInterval(tt);">停止</button>
</body> 
</html>

动画效果:


本文链接:HTML5 Canvas 图像动画的实现,由领悟书生原创

转载请注明出处【http://www.656463.com/article/333】

相关问答

更多

html5 canvas 开发游戏 的sprite方法

html5 canvas开发游戏,sprite是自定义的类,动画完全是通过js的定时器和内置的接口(不需要插件)实现的,和css3动画不一样,跟css sprite更是两码事,对canvas开发感兴趣,可以关注我的【深入浅出HTML5游戏开发视频教程】。

在HTML5 Canvas上绘制形状...带视频(Draw shapes on HTML5 Canvas…with video)

您可以将html5视频元素绘制到画布上。 drawImage方法接受第一个参数中的视频元素,就像图像元素一样。 这将获取视频元素的当前“帧”并将其渲染到画布上。 要获得流畅的视频播放,您需要反复将视频绘制到画布上。 然后,您可以在画布上正常绘制,确保在每次更新视频帧后重绘所有内容。 这是一个画布上的视频演示 这里是对视频和画布的深入研究 You can draw html5 video elements onto a canvas. The drawImage method accepts a

可以用jQuery深度克隆HTML5 canvas元素吗?(Possible to deep clone HTML5 canvas element with jQuery?)

如果你不需要复制任何附加的事件处理程序(一般来说,我怀疑是可能的),我只使用当前接受的解决方案使用base64将画布图像从一个画布显示到另一个画布 //grab the context from your destination canvas var destCtx = destinationCanvas.getContext('2d'); //call its drawImage() function passing it the source canvas directly destCtx

HTML5 Canvas调整图像大小点击缩放(HTML5 Canvas Resize image Click to Zoom)

繁荣! 我将一堆StackOverflow引用结合到适合您的内容中: http : //jsfiddle.net/CMse5/1/ 这是代码: HTML: <div id="map"> <canvas id="canvas" width="300" height="300"></canvas> </div> CSS: canvas { border: 1px solid black; } JS: $( document ).ready( function() { var ca

HTML5 Canvas对比滤镜(HTML5 Canvas contrast filter)

既然你说你已经调整了亮度,听起来你需要的只是对比度调整算法这里是C#方法的一个线程(看看更新2),代码的逻辑是合理的,可以在任何程序中使用: 有效地调整C#中图像的对比度 - Stack Overflow Since you said you already adjusted the brightness and it sounds like all you need is the algorithm for contrast adjusting here's a thread for a C#

相关文章

更多

最近更新

更多