-
使用viewport的meta（元信息）设置屏幕宽度信息
查看全部 -
使用clearInterval来停止setInterval
查看全部 -
使用setInterval实现动画
查看全部 -
filter属性的一些常用值
查看全部 -
使用css3的filter属性设置为blur实现模糊效果
查看全部 -
基本思路：
<canvas1 绘制blur的图像>
<canvas2 绘制清晰的图像，覆盖在1上，但通过控制剪切区域来控制其显示>
查看全部 -
我的笔记：
红包照片，canvas
查看全部 -
https://github.com/king0964/canvasExample.git（实现五角星旋转和刮刮卡效果）
实现老师的五角星旋转效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>canvas玩儿转红包照片</title>
<!-- <link rel="stylesheet" type="text/css" href="css/blur_canvas.css"> -->
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.wrapper {
position: relative;
/*width: 902px;
height: 600px;*/
margin: 0 auto;
overflow: hidden;
}
.wrapper img {
position: absolute;
left: 0;
top: 0;
z-index: -1;
filter: blur(50px);
}
#canvas {
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.button {
position: absolute;
top: 90%;
z-index: 100;
width: 100%;
text-align: center;
}
.button button {
width: 60px;
height: 30px;
margin: 0 5px;
}
</style>
</head>
<body>
<div class="wrapper" id="wrapper">
<img src="images/bg_lg.jpg" alt="背景图" id="blur-image">
<canvas id="canvas"></canvas>
<div class="button">
<button id="showImg">Show</button>
<button id="resetImg">Reset</button>
</div>
</div>
<script>
var showImg = document.getElementById('showImg');
var resetImg = document.getElementById('resetImg');
var wrapper = document.getElementById('wrapper');
var blurImage = document.getElementById('blur-image');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var image = new Image();
var radius = 0,
initMaxRadius = 50, //原始圆形显示半径
diagonalLength, //对角线长度
clippingRegion = null, //存储左边和半径
initTimer, //初始化的定时器
timer, //图片显示的定时器
leftMargin = 0, //图片左边距（自适应方法是根据屏幕大小截取图片中间部分显示）
topMargin = 0,
rot = 0; //旋转角度
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// console.log(canvas.height);
diagonalLength = 2 * Math.max(canvas.width, canvas.height);
image.src = 'images/bg_lg.jpg';
image.onload = function() {
wrapper.style.width = canvas.width + 'px'; //赋值外边框宽高
wrapper.style.height = canvas.height + 'px';
blurImage.style.width = image.width + 'px'; //赋值图片宽高
blurImage.style.height = image.height + 'px';
leftMargin = (image.width - canvas.width) / 2;
topMargin = (image.height - canvas.height) / 2;
blurImage.style.left = String(-leftMargin) + 'px'; //赋值图片位置(因为有可能图片比屏幕小)
blurImage.style.top = String(-topMargin) + 'px';
initCanvas(image);
};
resetImg.onclick = function() {
if (initTimer) clearInterval(initTimer);
if (timer) clearInterval(timer);
initCanvas(image);
};
showImg.onclick = function() {
timer = setInterval(function() {
clippingRegion.r += 10; // 控制递增速度
if (clippingRegion.r >= diagonalLength) {
clearInterval(timer);
}
rot += 10;
console.log(rot);
draw(image, clippingRegion, rot);
}, 30);
};
// 绘制初始化圆形
function initCanvas(image) {
var theLeft = leftMargin < 0 ? -leftMargin : 0; //图片小于canvas，避免溢出需要减去
var theTop = topMargin < 0 ? -topMargin : 0;
clippingRegion = {
x: Math.random() * (canvas.width - 2 * initMaxRadius - 2 * theLeft) + initMaxRadius + theLeft, //这个方法避免溢出
y: Math.random() * (canvas.height - 2 * initMaxRadius - 2 * theTop) + initMaxRadius + theTop,
r: radius
};
initTimer = setInterval(function() {
clippingRegion.r += 5; // 控制递增速度
if (clippingRegion.r >= initMaxRadius) {
clearInterval(initTimer);
}
draw(image, clippingRegion, 0);
}, 30);
}
// 圆形剪切图片显示
function draw(image, clippingRegion, rot) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.save();
drawStar(clippingRegion.r, clippingRegion.x, clippingRegion.y, rot, '#282d55');
context.clip();
// context.drawImage(image, leftMargin, topMargin, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
// 复杂写法是为了兼容图片宽高小于画布宽高
context.drawImage(image, Math.max(leftMargin, 0), Math.max(topMargin, 0), Math.min(canvas.width, image.width), Math.min(canvas.height, image.height), Math.max(0, -leftMargin), Math.max(0, -topMargin), Math.min(canvas.width, image.width), Math.min(canvas.height, image.height));
context.restore();
}
// 绘制五角星
function drawStar(r, x, y, rot, strokeColor) {
// 路径
context.beginPath();
for (i = 0; i < 5; i++) {
context.lineTo(Math.cos((18 + i * 72 - rot) / 180 * Math.PI) * r + x, -Math.sin((18 + i * 72 - rot) / 180 * Math.PI) * r + y);
context.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * r * 0.5 + x, -Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * r * 0.5 + y);
}
context.closePath();
// 状态
context.strokeStyle = strokeColor;
// 设置
context.stroke();
}
</script>
</body>
</html>
查看全部 -
随机化剪辑区域2查看全部
-
随机化剪辑区域查看全部
-
monk路too噢噢噢哦哦查看全部
-
filter：blur（5）模糊 filter：grayscale（5）灰度 filter：sepia（5）黄棕色 filter：saturate（5）饱和度 filter：hue-rotate（50deg）色相 filter：invert（1）反色 filter：opacity（0.2）不透明度 filter：brightness（0.2）明度 filter：contrast（2）对比度 filter：drop-shadow（10px 10px 2px #aaa）阴影查看全部
举报