canvas实现爱心和彩虹雨效果

来源:脚本之家  责任编辑:小易  

没有具体的例子,无法很明确的回答你,但是如果是两边是2个方框 中间是一条直线连接的话,这个就很简单: html: <div class="test"> <div class="left&qu

效果图:

如果想在ie也支持的话,那只能用边框画了,还要用两个div,一个去遮另一个。就麻烦了。如果你需要的话我再说。比较麻烦。

代码如下:

 本文实例讲述了基于html5 canvas实现漫天飞雪效果的方法,运行该实例可以看到很棒的下雪效果。如下图所示: 主要代码如下: 代码如下: <!DOCTYPE html PUBLIC &q

<!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title></title>
 </head>
 <body>
 <canvas id="canvas"></canvas>
 <script>
 var canvas = document.getElementById('canvas'),
 ctx = canvas.getContext('2d'),
 canvasW = canvas.width = window.innerWidth,
 canvasH = canvas.height = window.innerHeight,
 canvasWHalf = canvasW / 2,
 canvasHHalf = canvasH / 2,
 xoff = canvasWHalf - 306,
 yoff = 50,
 bg = '00061a',
 id = 0,
 raindrops = [],
 minSize = 1,
 maxSize = 4,
 minSpeed = 5,
 maxSpeed = 20,
 minHue = 0,
 maxHue = 360,
 maxAmount = 50;
 function random(min, max) {
 if (arguments.length < 2) {
  max = min;
  min = 0;
 }
 return Math.floor(Math.random() * (max - min) + min);
 }
 function hexToRGB(hex, opacity) {
 var rgb = '';
 hex.match(/.{2}/g).forEach(function(n) {
  rgb += (parseInt(n, 16)) + ',';
 });
 return 'rgba(' + rgb + opacity + ')';
 }
 function draw() {
 // Heart
 ctx.fillStyle = hexToRGB(bg, '0.1');
 ctx.beginPath();
 // Left half
 ctx.moveTo(0, 0);
 ctx.lineTo(canvasWHalf, 0);
 ctx.lineTo(304 + xoff, 97 + yoff);
 ctx.bezierCurveTo(282 + xoff, -5 + yoff, 80 + xoff, -6 + yoff, 76 + xoff, 165 + yoff);
 ctx.bezierCurveTo(74 + xoff, 251 + yoff, 184 + xoff, 300 + yoff, 304 + xoff, 447 + yoff);
 ctx.lineTo(canvasWHalf, canvasH);
 ctx.lineTo(0, canvasH);
 // Right half
 ctx.moveTo(canvasW, 0);
 ctx.lineTo(canvasWHalf, 0);
 ctx.lineTo(304 + xoff, 97 + yoff);
 ctx.bezierCurveTo(326 + xoff, 5 + yoff, 528 + xoff, 6 + yoff, 532 + xoff, 165 + yoff);
 ctx.bezierCurveTo(534 + xoff, 251 + yoff, 424 + xoff, 300 + yoff, 304 + xoff, 447 + yoff);
 ctx.lineTo(canvasWHalf, canvasH);
 ctx.lineTo(canvasW, canvasH);
 ctx.closePath();
 ctx.fill();
 // Raindrops
 for (var i = 1; i < id; i++) {
  raindrops[i].fall();
 };
 }
 var Raindrop = function() {
 id++;
 this.y = random(-canvasH);
 this.x = random(canvasW);
 this.size = random(minSize, maxSize);
 this.speed = random(minSpeed, maxSpeed);
 this.color = 'hsl(' + random(minHue, maxHue) + ',100%,55%)';
 this.origColor = this.color;
 this.id = id;
 raindrops[id] = this;
 };
 Raindrop.prototype.fall = function() {
 this.y += this.speed;
 if (this.y >= canvasH) {
  this.y = random(-canvasH);
  this.x = random(canvasW);
 }
 ctx.save();
 ctx.beginPath();
 var gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
 gradient.addColorStop(0, '#fff');
 gradient.addColorStop(0.5, this.color);
 gradient.addColorStop(1, hexToRGB(bg, 0));
 ctx.rect(this.x, this.y, this.size, maxSpeed);
 ctx.fillStyle = gradient;
 ctx.fill();
 ctx.closePath();
 ctx.restore();
 };
 (function init() {
 ctx.fillStyle = '#' + bg;
 ctx.fillRect(0, 0, canvasW, canvasH);
 for (var i = 0; i < maxAmount; i++) {
  new Raindrop();
 }
 }());
 function animate() {
 draw();
 window.requestAnimationFrame(animate);
 }
 window.requestAnimationFrame(animate);
 function mouseTrail(x, y) {
 ctx.save();
 ctx.globalCompositeOperation = 'overlay';
 ctx.fillStyle = 'rgba(255,255,255,0.1)';
 ctx.arc(x, y, 50, 0, Math.PI * 2);
 ctx.fill();
 ctx.restore();
 }
 window.addEventListener('mousemove', function(cursor) {
 mouseTrail(cursor.x, cursor.y);
 });
 </script>
 </body>
</html>

而对于firefox和chrome这样的现代浏览器,我们使用canvas来实现旋转效果。 function ; webkit可以用-webkit-transform: rotate(); 但这并不如html5的canvas实现的效果好。 以

扩展阅读,根据您访问的内容系统为您准备了以下内容,希望对您有帮助。

javascript+HTML5的Canvas实现Lab单车动画效果

本文实例讲述了javascript+HTML5的Canvas实现Lab单车动画效果。分享给大家供大家参考。具体如下:

这里运用HTML5实现的单车动画,运行一下效果你就明白了,不过不要在IE8下测试,没效果的。请在支持最新HTML3和CSS3的浏览器下测试,祝您好运。

运行效果截图如下:

具体代码如下:

<html> <head> <title>Canvas Lab单车动画,HTML5动画</title> </head> <script type="text/javascript"> var framecounter = 800;//为了完成作业,无耻了点,在这里设置变量…… var direction = "left"; function drawBikeBody () { var canvas = document.getElementById('diagonal'); var context = canvas.getContext('2d'); context.lineWidth = 3; context.beginPath(); context.moveTo(0,0); context.lineTo(150,0); context.lineTo(100,100); context.closePath(); context.moveTo(100,100); context.lineTo(200,75);//后轮轴承点 context.lineTo(150,0); //下面那个一个脚踏 context.moveTo(100,100); context.lineTo(110,120); context.lineTo(120,120); context.moveTo(110,120); context.lineTo(100,120); //另一个脚踏 context.moveTo(100,100); context.lineTo(90,80); context.lineTo(100,80); context.moveTo(90,80); context.lineTo(80,80); //座包 context.moveTo(150,0); context.lineTo(160,-20); context.lineTo(175,-20); context.moveTo(160,-20); context.lineTo(135,-20); //扶手 context.moveTo(0,0); context.lineTo(15,-30); context.lineTo(10,-35); context.lineTo(20,-40); context.lineTo(40,-40); //前轮轴承 context.moveTo(0,0); context.lineTo(-35.5,75);//前轮轴承点 //前轮 context.moveTo(75-35.5,75);//去掉这个目测不行啊,貌似context.arc()方法里有lineTo context.arc(-35.5,75,75,0,Math.PI*2,true); //后轮 context.moveTo(200+75,75); context.arc(200,75,75,0,Math.PI*2,true); } function drawForcePiece1(){ var canvas = document.getElementById('diagonal'); var context = canvas.getContext('2d'); context.beginPath(); for(var i = framecounter; i < framecounter+360; i += 20) { context.moveTo(-35.5,75); x = Math.cos(Math.PI / 180 * i) * 75 + (-35.5); y = Math.sin(Math.PI / 180 * i) * 75 + 75; context.lineTo(x,y); } } function drawForcePiece2(){ var canvas = document.getElementById('diagonal'); var context = canvas.getContext('2d'); context.beginPath(); for(var i = framecounter; i < framecounter+360; i += 20) { context.moveTo(200,75); x = Math.cos(Math.PI / 180 * i) * 75 + 200; y = Math.sin(Math.PI / 180 * i) * 75 + 75; context.lineTo(x,y); } } function drawBike(){ var canvas = document.getElementById('diagonal'); var context = canvas.getContext('2d'); context.clearRect(0, 0, 800, 600); context.save(); context.translate(framecounter,300); drawBikeBody(); context.stroke(); context.restore(); context.save(); context.translate(framecounter,300); drawForcePiece1(); context.stroke(); context.restore(); context.save(); context.translate(framecounter,300); drawForcePiece2(); context.stroke(); context.restore(); if (direction==="left") { framecounter--; }else{ framecounter++; } } function move() { var interal = setInterval(function () { drawBike(); }, 10); } window.addEventListener("load",move,true); </script> <body> <canvas id="diagonal" width="800" height="600" style="border:1px dashed">Please update your brower to the newest version!</canvas> <br> <button id="reset" onclick="framecounter=800;">Reset</button> <button id="left" onclick="direction='left'">Go Left</button> <button id="right" onclick="direction='ture'">Go Right</button> </body> </html>

希望本文所述对大家的javascript程序设计有所帮助。

JS+Canvas 实现下雨下雪效果

最近做了一个项目,其中有需求要实现下雨小雪的动画特效,所以在此做了个drop组件,来展现这种canvas常见的下落物体效果。在没给大家介绍正文之前,先给大家展示下效果图:

展示效果图:

下雨 下雪

看起来效果还是不错的,相对于使用创建dom元素来制作多物体位移动画, 使用canvas会更加容易快捷,以及性能会更好

调用代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #canvas{ width:100%; height: 100%; } </style> </head> <body> <canvas id="canvas"></canvas> <script src="canvasDrop.js"></script> <script> canvasDrop.init({ type: "rain", // drop类型,有rain or snow speed : [0.4,2.5], //速度范围 size_range: [0.5,1.5],//大小半径范围 hasBounce: true, //是否有反弹效果or false, wind_direction: -105 //角度 hasGravity: true //是否有重力考虑 }); </script> </body> </html>

好了,接下来讲解一下简单的实现原理 首先,先定义一些我们会用到的全局变量,如风向角度,几率,对象数据等

定义全局变量

//定义两个对象数据 //分别是drops下落物体对象 //和反弹物体bounces对象 var drops = [], bounces = []; //这里设定重力加速度为0.2/一帧 var gravity = 0.2; var speed_x_x, //横向加速度 speed_x_y, //纵向加速度 wind_anger; //风向 //画布的像素宽高 var canvasWidth, canvasHeight; //创建drop的几率 var drop_chance; //配置对象 var OPTS; //判断是否有requestAnimationFrame方法,如果有则使用,没有则大约一秒30帧 window.requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 30); };

定义核心对象

接下来我们需要定义几个重要的对象 该组织所需定义的对象也比较少,总共才三个 在整个drop组件*定义了`三个核心对象,分别是如下:

Vector 速度对象,带有横向x,和纵向y的速度大小 单位为:V = 位移像素/帧

对于Vector对象的理解也十分简单粗暴,就是记录下落对象drop的速度/V

var Vector = function(x, y) { //私有属性 横向速度x ,纵向速度y this.x = x || 0; this.y = y || 0; }; //公有方法- add : 速度改变函数,根据参数对速度进行增加 //由于业务需求,考虑的都是下落加速的情况,故没有减速的,后期可拓展 /* * @param v object || string */ Vector.prototype.add = function(v) { if (v.x != null && v.y != null) { this.x += v.x; this.y += v.y; } else { this.x += v; this.y += v; } return this; }; //公有方法- copy : 复制一个vector,来用作保存之前速度节点的记录 Vector.prototype.copy = function() { //返回一个同等速度属性的Vector实例 return new Vector(this.x, this.y); }; Drop 下落物体对象, 即上面效果中的雨滴和雪, 在后面你也可自己拓展为陨石或者炮弹 对于Drop对象其基本定义如下 //构造函数 var Drop = function() { /* .... */ }; //公有方法-update Drop.prototype.update = function() { /* .... */ }; //公有方法-draw Drop.prototype.draw = function() { /* .... */ };

看了上面的三个方法,是否都猜到他们的作用呢,接下来让我们了解这三个方法做了些什么

构造函数

构造函数主要负责定义drop对象的初始信息,如速度,初始坐标,大小,加速度等

//构造函数 Drop var Drop = function() { //随机设置drop的初始坐标 //首先随机选择下落对象是从从哪一边 var randomEdge = Math.random()*2; if(randomEdge > 1){ this.pos = new Vector(50 + Math.random() * canvas.width, -80); }else{ this.pos = new Vector(canvas.width, Math.random() * canvas.height); } //设置下落元素的大小 //通过调用的OPTS函数的半径范围进行随机取值 this.radius = (OPTS.size_range[0] + Math.random() * OPTS.size_range[1]) *DPR; //获得drop初始速度 //通过调用的OPTS函数的速度范围进行随机取值 this.speed = (OPTS.speed[0] + Math.random() * OPTS.speed[1]) *DPR; this.prev = this.pos; //将角度乘以 0.017453293 (2PI/360)即可转换为弧度。 var eachAnger = 0.017453293; //获得风向的角度 wind_anger = OPTS.wind_direction * eachAnger; //获得横向加速度 speed_x = this.speed * Math.cos(wind_anger); //获得纵向加速度 speed_y = - this.speed * Math.sin(wind_anger); //绑定一个速度实例 this.vel = new Vector(wind_x, wind_y); };

Drop对象的update方法

update方法负责,每一帧drop实例的属性的改变 如位移的改变

Drop.prototype.update = function() { this.prev = this.pos.copy(); //如果是有重力的情况,则纵向速度进行增加 if (OPTS.hasGravity) { this.vel.y += gravity; } // this.pos.add(this.vel); };

Drop对象的draw方法

draw方法负责,每一帧drop实例的绘画

Drop.prototype.draw = function() { ctx.beginPath(); ctx.moveTo(this.pos.x, this.pos.y); //目前只分为两种情况,一种是rain 即贝塞尔曲线 if(OPTS.type =="rain"){ ctx.moveTo(this.prev.x, this.prev.y); var ax = Math.abs(this.radius * Math.cos(wind_anger)); var ay = Math.abs(this.radius * Math.sin(wind_anger)); ctx.bezierCurveTo(this.pos.x + ax, this.pos.y + ay, this.prev.x + ax , this.prev.y + ay, this.pos.x, this.pos.y); ctx.stroke(); //另一种是snow--即圆形 }else{ ctx.moveTo(this.pos.x, this.pos.y); ctx.arc(this.pos.x, this.pos.y, this.radius, 0, Math.PI*2); ctx.fill(); } };

bounce 下落落地反弹对象, 即上面雨水反弹的水滴, 你也可后期拓展为反弹的碎石片或者烟尘

定义的十分简单,这里就不做详细说明

var Bounce = function(x, y) { var dist = Math.random() * 7; var angle = Math.PI + Math.random() * Math.PI; this.pos = new Vector(x, y); this.radius = 0.2+ Math.random()*0.8; this.vel = new Vector( Math.cos(angle) * dist, Math.sin(angle) * dist ); }; Bounce.prototype.update = function() { this.vel.y += gravity; this.vel.x *= 0.95; this.vel.y *= 0.95; this.pos.add(this.vel); }; Bounce.prototype.draw = function() { ctx.beginPath(); ctx.arc(this.pos.x, this.pos.y, this.radius*DPR, 0, Math.PI * 2); ctx.fill(); };

对外接口

update

即相当于整个canvas动画的开始函数

function update() { var d = new Date; //清理画图 ctx.clearRect(0, 0, canvas.width, canvas.height); var i = drops.length; while (i--) { var drop = drops[i]; drop.update(); //如果drop实例下降到底部,则需要在drops数组中清楚该实例对象 if (drop.pos.y >= canvas.height) { //如果需要回弹,则在bouncess数组中加入bounce实例 if(OPTS.hasBounce){ var n = Math.round(4 + Math.random() * 4); while (n--) bounces.push(new Bounce(drop.pos.x, canvas.height)); } //如果drop实例下降到底部,则需要在drops数组中清楚该实例对象 drops.splice(i, 1); } drop.draw(); } //如果需要回弹 if(OPTS.hasBounce){ var i = bounces.length; while (i--) { var bounce = bounces[i]; bounce.update(); bounce.draw(); if (bounce.pos.y > canvas.height) bounces.splice(i, 1); } } //每次产生的数量 if(drops.length < OPTS.maxNum){ if (Math.random() < drop_chance) { var i = 0, len = OPTS.numLevel; for(; i<len; i++){ drops.push(new Drop()); } } } //不断循环update requestAnimFrame(update); }

init

init接口,初始化整个canvas画布的一切基础属性 如获得屏幕的像素比,和设置画布的像素大小,和样式的设置

function init(opts) { OPTS = opts; canvas = document.getElementById(opts.id); ctx = canvas.getContext("2d"); ////兼容高清屏幕,canvas画布像素也要相应改变 DPR = window.devicePixelRatio; //canvas画板像素大小, 需兼容高清屏幕,故画板canvas长宽应该乘于DPR canvasWidth = canvas.clientWidth * DPR; canvasHeight =canvas.clientHeight * DPR; //设置画板宽高 canvas.width = canvasWidth; canvas.height = canvasHeight; drop_chance = 0.4; //设置样式 setStyle(); } function setStyle(){ if(OPTS.type =="rain"){ ctx.lineWidth = 1 * DPR; ctx.strokeStyle = 'rgba(223,223,223,0.6)'; ctx.fillStyle = 'rgba(223,223,223,0.6)'; }else{ ctx.lineWidth = 2 * DPR; ctx.strokeStyle = 'rgba(254,254,254,0.8)'; ctx.fillStyle = 'rgba(254,254,254,0.8)'; } }

结束语

好了,一个简单的drop组件已经完成了,当然其存在着许多地方不够完善,经过本次drop组件的编写,对于canvas的动画实现,我相信在H5的场景中拥有着许多可发掘的地方。

最后说下不足的地方和后期的工作哈:

0、该组件目前对外接口不够多,可调节的范围并不是很多,抽象不是很彻底

1、 setStyle 设置 基本样式

2、 Drop 和Bounce 对象的 update 和 draw 方法的自定义,让用户可以设立更多下落的 速度和大小改变的形式和样式效果

3、 应增加对动画的pause,加速和减速等操作的接口

以上所述是小编给大家介绍的JS和Canvas 实现下雨下雪效果的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

本文转载:http://blog.csdn.net/xllily_11/article/details/51444311

js+canvas实现动态吃豆人效果

效果图:

代码如下:

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>吃豆人V01</title> </head> <body> <canvas id="canvas" width="500px" height="500px" style="border: 1px solid black"></canvas> <script> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); //TODO 面向对象方式解析 //TODO 1.创建吃豆人的对象模板 function Pacman(){ //TODO 属性 this.isOpen = true;//TODO 开关 this.start = 45*Math.PI/180; this.end = 315*Math.PI/180; //TODO 方法 //TODO 1.绘制方法 this.paint = function(){ //TODO 吃豆人的脸 context.beginPath(); context.arc(250,200,100,this.start,this.end); context.lineTo(250,200); context.closePath(); context.fillStyle = "yellow"; context.fill(); context.stroke(); //TODO 吃豆人的眼睛 context.beginPath(); context.arc(250,150,15,0,Math.PI*2); context.fillStyle = "black"; context.fill(); //TODO 吃豆人的眼神 context.beginPath(); context.arc(255,145,5,0,Math.PI*2); context.fillStyle = "white"; context.fill(); } //TODO 2.控制开闭切换 this.open = function(){ if(this.isOpen){//TODO 开口 this.start = 45*Math.PI/180; this.end = 315*Math.PI/180; this.isOpen = false; }else{//TODO 闭口 this.start = 0; this.end = Math.PI*2; this.isOpen = true; } } } //TODO 创建吃豆人的对象 var pacman = new Pacman(); //TODO 核心控制器 setInterval(function(){ context.clearRect(0,0,canvas.width,canvas.height); pacman.paint(); pacman.open(); },200); </script> </body> </html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

利用HTML5的画布Canvas实现刮刮卡效果

先给大家展示效果:

查看演示   源码下载

你玩过刮刮卡么?一不小心可以中奖的那种。今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果。

我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片,就达到刮刮卡效果。

HTML

我们只需要在页面中加入canvas标签元素,其他的就看javascript的了。注意canvas元素是HTML5才有的元素,运行在支持HTML5的现代浏览器上。

<canvas></canvas>

Javascript

首先,我们要禁用页面的鼠标选中拖动的事件,就是不运行执行选中操作。

var bodyStyle = document.body.style; bodyStyle.mozUserSelect = 'none'; bodyStyle.webkitUserSelect = 'none';

接着我们定义图片类,获取canvas元素,并设置背景和位置属性。我们在本例中用到两张随机照片,每次刷新随机一张图片作为背景。

var img = new Image(); var canvas = document.querySelector('canvas'); canvas.style.backgroundColor='transparent'; canvas.style.position = 'absolute'; var imgs = ['p_0.jpg','p_1.jpg']; var num = Math.floor(Math.random()*2); img.src = imgs[num];

然后进入主体,当检测到图片加载完的时候,首先定义一些属性和函数,函数layer()用来绘制一个灰色的正方形,eventDown()定义了按下事件eventUp()定义了松开事件,eventMove()定义了移动事件,其中当按下时,获取坐标位移,并通过arc(x, y, 10, 0, Math.PI * 2)来绘制小圆点。

img.addEventListener('load', function(e) { var ctx; var w = img.width, h = img.height; var offsetX = canvas.offsetLeft, offsetY = canvas.offsetTop; var mousedown = false; function layer(ctx) { ctx.fillStyle = 'gray'; ctx.fillRect(0, 0, w, h); } function eventDown(e){ e.preventDefault(); mousedown=true; } function eventUp(e){ e.preventDefault(); mousedown=false; } function eventMove(e){ e.preventDefault(); if(mousedown) { if(e.changedTouches){ e=e.changedTouches[e.changedTouches.length-1]; } var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0, y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0; with(ctx) { beginPath() arc(x, y, 10, 0, Math.PI * 2);//绘制圆点 fill(); } } } //... });

最后,通过canvas调用以上函数,绘制图形,并且侦听触控及鼠标事件,调用相应的函数,请看代码:

img.addEventListener('load', function(e) { //..接上段代码 canvas.width=w; canvas.height=h; canvas.style.backgroundImage='url('+img.src+')'; ctx=canvas.getContext('2d'); ctx.fillStyle='transparent'; ctx.fillRect(0, 0, w, h);//绘制矩形 layer(ctx); ctx.globalCompositeOperation = 'destination-out'; canvas.addEventListener('touchstart', eventDown); canvas.addEventListener('touchend', eventUp); canvas.addEventListener('touchmove', eventMove); canvas.addEventListener('mousedown', eventDown); canvas.addEventListener('mouseup', eventUp); canvas.addEventListener('mousemove', eventMove);

以上内容仅供参考,大家可以结合实际情况,结合后台程序和数据库,完成一个真正的刮刮乐。以上内容是我写的利用HTML5的画布Canvas实现刮刮卡效果,希望大家喜欢。

基于canvas实现的钟摆效果完整实例

本文实例讲述了基于canvas实现的钟摆效果。分享给大家供大家参考,具体如下:

运行效果截图如下:

具体代码如下:

<!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { border:2px solid gray; box-shadow:0px 0px 2px 2px #494949; } </style> </head> <body> <canvas id="canvas" width="500px" height="500px"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var r = 250; var colorList = "abcdefABCDEF0123456789".split(""); var colorListLength = colorList.length; var color = function() { var _color = "#"; for(var i=0; i<6; i++) { _color += colorList[Math.round(Math.random()*colorListLength)]; } return _color; }; var createArc = function(attrs) { ctx.save(); ctx.beginPath(); ctx.fillStyle = attrs.color || color(); ctx.arc(attrs.x, attrs.y, attrs.r, 0, Math.PI*2); ctx.closePath(); ctx.fill(); ctx.restore(); }; var createLine = function(from, to) { ctx.save(); ctx.beginPath(); ctx.moveTo(from.x, from.y); ctx.lineTo(to.x, to.y); ctx.stroke(); ctx.closePath(); ctx.restore(); } var createAll = function(to) { createArc({x: 250, y: 0, r: 10, color: "black"}); createArc({x: to.x, y: to.y, r: 20, color: "black"}); createLine({x: 250, y: 0}, {x: to.x, y: to.y}); }; var minAngle = 0; var maxAngle = Math.PI; var addAngle = Math.PI/24; var angle = minAngle; var mode = "left"; var interval = setInterval(function() { var y = Math.sin(angle)*r+200; var x = Math.cos(angle)*r+250; switch(mode) { case "left": ctx.clearRect(0, 0, 500, 500); createAll({x: x, y: y}); angle += addAngle; if(angle > maxAngle) { mode = "right"; angle -= addAngle; return; } break; case "right": ctx.clearRect(0, 0, 500, 500); createAll({x: x, y: y}); angle -= addAngle; if(angle < minAngle) { mode = "default"; angle += addAngle; return; } break; case "default": createAll({x: x, y: y}); angle += addAngle; if(angle > maxAngle) { mode = "left"; angle = minAngle; return; } break; } }, 50); </script> </body> </html>

更多关于js特效相关内容感兴趣的读者可查看本站专题:《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》

希望本文所述对大家JavaScript程序设计有所帮助。


  • 本文相关:
  • js面向对象实现canvas制作彩虹球喷枪效果
  • canvas实现流星雨的背景效果
  • js+canvas 实现下雨下雪效果
  • js调用某段sql语句的方法
  • js中math之random,round,ceil,floor的用法总结
  • js工厂模式开发实践案例分析
  • ajax blog 用到的几个函数
  • xmlplus组件设计系列之下拉刷新(pullrefresh)(6)
  • jschart组件使用详解
  • 拥抱模块化的javascript
  • 分享几种比较简单实用的javascript tabel切换
  • d3.js实现柱状图的方法详解
  • 基于replacechild制作简单的吞噬特效
  • javascript+HTML5的Canvas实现Lab单车动画效果
  • JS+Canvas 实现下雨下雪效果
  • js+canvas实现动态吃豆人效果
  • 利用HTML5的画布Canvas实现刮刮卡效果
  • 基于canvas实现的钟摆效果完整实例
  • 如何不用html5 canvas 实现两个方框的连线效果
  • 如何不用html5 canvas 实现两个方框的连线效果
  • 基于html5 canvas实现漫天飞雪效果实例
  • javascript结合canvas实现图片旋转效果
  • HTML5 canvas标签实现刮刮卡效果
  • js面向对象实现canvas制作彩虹球喷枪效果
  • js+HTML5实现canvas多种颜色渐变效果的方法
  • HTML5用canvas怎么实现动画效果
  • html5用canvas怎么实现动画效果
  • canvas怎样实现气泡上升的效果
  • HTML5用canvas怎么实现动画效果
  • HTML5用canvas怎么实现动画效果
  • HTML5用canvas怎么实现动画效果
  • HTML5用canvas怎么实现动画效果
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved