用canvas实现图片转动效果

最新推荐文章于 2022-08-04 11:40:09 发布
最新推荐文章于 2022-08-04 11:40:09 发布
阅读量623 收藏
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nzf_001/article/details/28866027
版权

用canvas实现图片转动效果：

<!DOCTYPE html>
 
<html>
 
<head>
 

</head>
 
<body>
 

<canvas id="myCanvas" width="240" height="240" style="border:1px solid red;margin:0;padding:0;">
 

</canvas>
 
<script>
 
var ctx;
 
var pic;
 
var i=0;
 
var screen_w = 'ontouchstart' in window ? screen.width:document.body.clientWidth;
 
var pic_w = null;
 
window.οnlοad=function(){
 
  ctx= document.getElementByIdx_x_x('myCanvas').getContext('2d'); 
 
  pic = new Image();
  pic.src = screen_w<480?'loading.png':screen_w>=480 && screen_w<640?'loading-l.png':'loading-x.png';
 
  setInterval(rotate,100);
 
}
 
function rotate(){
 
        ctx.save();
 
        i += Math.PI/6;
 
        pic_w = pic_w || pic.width;
 
        ctx.translate(pic_w/2,pic_w/2);
 
        ctx.rotate(i);
 
        ctx.clearRect(-pic_w/2,-pic_w/2,pic_w,pic_w);
 
        ctx.drawImage(pic,-pic_w/2,-pic_w/2);
 
        ctx.restore();
 
}
 
</script>
 
</body>
 
</html>

 

文章来源http://bbs.html5cn.org/thread-362-1-26.html

zhizunbao_nie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
160种html5canvas图片切换特效
10-16
160种html5canvas图片切换特效 纯 html5 canvas 图片转换特效 高效，实用，炫丽多变 手机项目已经应用 本人原创 "展示".....
Canvas 图形(Ru)扭曲(Yao)效果
SolidCocoi的博客
02-16 2548
基于Canvas 的图形（Ru）扭曲（Yao）效果 首先声明一下该效果代码出自于B站某Up如图所示（深红5） ,内附有他本人微博和项目演示地址
使用JavaScript和Canvas开发游戏（二）
精彩人生
10-13 557
3、通过Canvas元素实现高级图像操作 http://www.brighthub.com/internet/web-development/articles/39509.aspx 这篇文章将带领大家学习使用JavaScript和Canvas元素操作图像了几种不同的方
canvas做静态图片波动
晚星的博客
08-04 348
使用前端技术实现静态图片局部流动效果
HTML 中使用 Canvas 2d 让静态图片动起来
抱朴守拙
06-22 1084
html 中使用 canvas 2d 让静态图片动起来
html5 canvas立体图片展示特效
06-12
"html5 canvas立体图片展示特效"是一个利用Canvas API实现的3D图像展示技术，这个案例展示了如何通过编程方式在网页上构建出引人注目的立体图片展示。 在HTML5 Canvas中，一切皆为像素操作。开发者可以通过`canvas`...
canvas实现微信大转盘抽奖
12-20
本项目"canvas实现微信大转盘抽奖"是利用这个技术来构建一个类似微信的抽奖活动，用户可以通过点击按钮来启动转盘抽奖，增强用户参与度和互动性。 Canvas是一个基于矢量图形的HTML标签，它可以用来绘制2D图形，如...
HTML5 Canvas眼睛眼珠跟随鼠标转动特效
06-11
眼眶可以用`fillRect()`或`drawImage()`（如果使用图片）来绘制，而眼珠则可能用到`arc()`来画出圆形。眼睛的形状可以根据需要设计得具有卡通感或逼真感。 接下来，核心部分是利用JavaScript监听鼠标的移动事件(`...
html5基于canvas实现的圆形时钟效果源码.zip
07-05
html5基于canvas实现的圆形时钟效果源码，可实现实时显示当前时间的功能，时钟表盘上同步对应高亮显示上午(AM)或下午(PM)。且指针转动流畅自然，效果逼真。该源码还可用于手机端显示当前时间。是一款非常优秀的实用...
HTML5 Canvas眼睛眼珠跟随鼠标转动特效.zip
最新发布
09-26
在`img`目录下，可能会有用于眼睛模型的图片资源，如背景、瞳孔或高光等，这些图片会被用在Canvas的绘图操作中，增加视觉的真实感。 总的来说，这个压缩包提供了一个学习和实践HTML5 Canvas、jQuery和动画制作的好...
javaScript学习笔记——如何让<canvas>动起来
jiulan1996的博客
05-01 2616
类似于动画，即一帧一帧的刷新场景 可以使用javaScript中的API function gameloop() {     window.requestAnimFrame(gameloop); } 其他类似的API还有setInterval，setTimeout，但requestAnimFrame更加科学，其原理是： 当前绘制完成之后，根据机器的性能来确定间隔多长时间绘制下一帧
Canvas拖动图形效果实现
qq_40734247的博客
09-20 6014
前言： 最近对于canvas产生了一些兴趣，我天生是对这种视觉的东西感到好奇的，因此投入了一些时间来玩一玩，仿照网上的一个案例实现了一个基于canvas的图形拖动效果。我主要是借鉴了他们的思想，代码部分是自己独立实现的，也因此走了一些canvas的坑。 Canvas图形拖动效果展示 主要实现的功能是： 鼠标点击会出现红色选中框，鼠标松开选中框消失； 鼠标移动，图片也会跟随移动； 图片只能在有限空间内移动，无法移动出边界。 实现逻辑 鼠标拖动逻辑 一点个人理解：鼠标事件或者其它浏览器事件都是独立的，但是
HTML5 canvas画的摇摆的树
xiongzhengxiang的专栏
12-09 1235
Tree          cssass.com提醒您：ie9以下用户请一边惭愧去吧          var con=document.getElementById("pad").getContext('2d');        con.strokeStyle = '#0f0';        con.lineWidth=1.8;    var Tree=functio
Canvas 设置图片进行 X 轴或(和) Y 轴的翻转
热门推荐
我所有的向往
04-18 1万+
原由 scale(x, y) translate(x, y) 解决方案 方法一 方法二 总结 原由 在看萧大直播写代码，第10次直播时，遇到一个在 Canvas 内进行图片翻转，里面用到了一块代码，理解起来有点绕，代码如下： this.game.context.save(); let x = this.x + this.width / 2; this.game.co...
在canvas里绘制多个图像并且旋转图像
u013285483的专栏
08-02 1万+
$(function() { var $my_canvas=$("#myCanvas"); var my_canvas=$my_canvas[0]; var context=my_canvas.getContext("2d"); // context.fill //ctx.fillStyle="#0000ff";
Canvas设置width与height 的问题！
aed97713的博客
11-22 739
最近因为工作需要，所以就学了一下Html中的Canvas标签。 当我看了一下教程后，自己写了一个hello world的时候，麻烦事就出现了。看下面代码： <!DOCTYPE html> <html lang="en"> <body> <canvas id="canvas1" style="width: 200px;height...
Meta标签中Keyword和Description权…
nzf_001的专栏nzf_001的专栏nzf_001的专栏nzf_001的专栏nzf_001的专栏
06-06 2457
从严格意义上，Meta 标签中的Keyword（关键词）、Description（描述）属于历史遗留问题。在早期的Web页面上，Meta 标签中的Keyword与Description用来描述页面的主要内容及向搜索引擎和访问用户介绍网页包含哪些方面信息，在HTML代码中，其被置于之间。 　　应该说，Meta 标签中的Keyword与Description曾经在搜索引擎优化中占据非常重要的地位，在搜
电子邮件页面EDM
nzf_001的专栏nzf_001的专栏nzf_001的专栏nzf_001的专栏nzf_001的专栏
06-06 1200
最近在弄个电子邮件页面，弄了好半天老是出问题，不通的邮箱看到的页面老是不一样，还出现错版，图片看不见问题，我查了相关资料才知道，原来这电子邮件页面主要还是要看你用的什么邮箱，就像不用的浏览器有差异是一样的。    如果你的用户中有人使用了Lotus Notes邮件客户端系统，要让每一个用户看到的都是同一样的东西，表格布局加上css是最好的选择。如果你能够向客户解释好，虽然你做的页面布局设计比 较简
使用canvas实现卡片展开效果
06-12
要实现卡片展开效果，可以使用canvas绘制卡片的背景和内容，并通过动画实现展开效果。以下是一个简单的实现步骤： 1. 创建一个canvas元素，并设置宽度和高度。 2. 绘制卡片的背景和内容，可以使用canvas提供的绘制图形和文本的API。 3. 添加点击事件，当用户点击卡片时，启动动画。 4. 在动画中，通过改变卡片的宽度和高度，实现卡片展开的效果。 以下是一个简单的示例代码： HTML部分： ``` <canvas id="card" width="300" height="200"></canvas> ``` JavaScript部分： ``` // 获取canvas元素 var canvas = document.getElementById('card'); // 获取绘制上下文 var ctx = canvas.getContext('2d'); // 绘制卡片背景和内容 // ... // 添加点击事件 canvas.addEventListener('click', function() { // 启动动画 var width = canvas.width; var height = canvas.height; var step = 10; var interval = setInterval(function() { if (width < 500) { width += step; canvas.width = width; } else { clearInterval(interval); } }, 10); }); ``` 需要注意的是，该示例只是一个简单的实现，实际应用中可能需要更复杂的动画效果和交互逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值