html中如何让图片交错,HTML5/Canvas 光圈交错幻觉
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
// RequestAnimationFrame shim by Paul Irish
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
/* VARS
----------------------------------------------- */
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
width,
height,
centerY,
centerX,
TWO_PI = Math.PI * 2,
movePixels = 0,
moveDirection = 1,
moveThreshold = 151;
function Pattern(color, number, padding, stroke) {
this.lineNum = number;
this.padding = padding;
this.color = color;
this.stroke = stroke;
this.dx = 0;
this.dy = 0;
}
Pattern.prototype.draw = function(dx, dy) {
ctx.strokeStyle = this.color;
ctx.lineWidth = this.stroke;
if (dy) {
this.dy = dy;
}
if (dx) {
this.dx = dx;
}
for (var i = 0; i < this.lineNum; i += 1) {
ctx.beginPath();
ctx.arc(centerX + this.dx, centerY + this.dy, (i * this.padding), 0, TWO_PI, false);
ctx.stroke();
}
}
function draw() {
requestAnimFrame(draw);
ctx.clearRect(0, 0, canvas.width, canvas.height);
var firstPattern = new Pattern('#E84D17', 20, 8, 3);
var secondPattern = new Pattern('#1787E8', 20, 8, 3);
firstPattern.draw();
secondPattern.draw(movePixels);
if (movePixels === moveThreshold || movePixels === -moveThreshold) {
moveDirection = moveDirection * -1;
}
movePixels += moveDirection;
}
/* INIT
----------------------------------------------- */
canvasSize();
ctx.globalCompositeOperation = 'multiply';
draw();
/* UTILITIES
----------------------------------------------- */
function canvasSize() {
width = window.innerWidth;
height = window.innerHeight;
centerY = height / 2;
centerX = width / 2;
canvas.height = height;
canvas.width = width;
}
html中如何让图片交错,HTML5/Canvas 光圈交错幻觉相关推荐
- html坐标截取图片,JavaScript+html5 canvas实现本地截图教程
最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canvas实现截图的,加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传&l ...
- html5 图片弹跳,html5 canvas画布里面圆球弹跳动画效果代码
特效描述:html5 canvas 画布 圆球弹跳动画.html5 跳动的球体 代码结构 1. HTML代码 Untitled Document body { margin: 0px; } var i ...
- html canvas保存为图片,在HTML5 Canvas中放入图片和保存为图片的方法
第一种方式 如果是使用的图片的话,就会涉及到canvas的图片跨域问题,因为canvas是禁止跨域的,如果图像来自其他域,调用toDataURL()会抛出一个错误 需要添加"img.cros ...
- html骰子图片点数,html5 canvas掷骰子(简单,学习基础canvas)
置骰子游戏 var cwidth = 400; //保存画布宽度和高度,用于擦除用 var cheight = 300; // //骰子的位置和大小 var diceX = 50; var diceY ...
- html5canvas中波浪线怎么画,html5 canvas画波浪
要实现这样的动画普通的CSS3是鞭长莫及了,只能使用Canvas.好在使用canvas也非常简单. Step1. 新建一个画布()元素,并放在所有按钮和logo的下方以免遮挡前面的元素. 将Canva ...
- html5中怎么把图片放大,HTML5中,如何为图片制作放大镜效果?
在文档中显示缩略图, 通过getComputedStyle来获取缩略图大小, 并映射成真实大小的图片尺寸; 给缩略图添加mouseon事件, 当鼠标处在缩略图上时显示放大镜元素; 反之则移除 给缩略图 ...
- html实例教程 图片绘画,Html5 canvas绘制一个机器人图形的实例教程
Canvas的功能强大,今天我只运用到Canvas的绘制图形功能来完成一个简单线条型机器人的绘制,在绘图的过程中我还是得复述一下用到的几个图形的基础知识,通过这个实例,你可以基本上了解到Canvas的 ...
- html5 canvas 图片变形,HTML5/Canvas 流动的变形圆形
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 /** * inspired by: * Rectangle World * http://rectangl ...
- nodejs html 生成图片,使用nodejs将html5 canvas base64编码图片保存为文件
目前流行的"你画我猜"应用,你有没有想过使用HTML5来实现过?那么不可避免的需要解决canvas保存图片到硬盘或mongodb之类的数据库.本文主要介绍使用nodejs将html ...
最新文章
- 多线程服务器模型-one loop per thread
- PHP $_SERVER 变量
- Oracle/MySQL/PostgreSQL考题等你挑战(附假期活动获奖名单)
- 判断浏览器 插件 jquery.ua.js
- iOS开发-16进制颜色转换
- MySQL48道经典基础面试题(包含各个方面)
- js中arguments的用法
- 解决Python包下载慢/超时的方法
- 杭州SEO:独家揭秘网站首页排版布局的详细方法!
- Java中的“无限循环”结构
- 如何下载Eclipse历史版本
- Stm32中英文手册官网免费
- 小啊呜产品读书笔记001:《邱岳的产品手记-03》第04+05讲 如何当好AI时代的产品经理 06讲 产品案例分析·TheGuardian的文本之美
- android 之手机客户端登陆
- 戴尔电脑怎么安装一级计算机,戴尔电脑如何重装系统
- linux系统安装vasp,超算平台安装-CentOS7下安装vasp(gnu编译)
- 深度学习中的遥感影像数据集
- 七牛云储存视频播放器的选择方案
- vids:xvid解码器_解码CSS位置:Paul O'Brien的大师班
- 夜神模拟器使用termux安装Ubuntu系统
热门文章
- Oracle 直方图理论
- C#/C++/Fortran 在32位/64位下数学计算性能对比
- Error loading native library: libnjni9.so.的解决办法
- 解决spring和struts配合问题
- Vue前后端对接时判断是否与后端连接成功
- Leetcode--1371. 每个元音包含偶数次的最长子字符串(Java)
- 【剑指offer】面试题63:股票的最大利润(Java)
- easyui 调用dialog中的方法_SolidWorks中标准件库的创建及调用方法
- 对10亿个数据去重java_20 亿个数字在 4G 内存中如何去重排序:快来试一试 BitMap...
- ncf 推荐系统_浅析神经协同过滤NCF在推荐系统的应用