-
- pinzaghi 2019-12-12
使用viewport的meta（元信息）设置屏幕宽度信息
-
截图0赞 · 0采集
-
- pinzaghi 2019-12-11
使用clearInterval来停止setInterval
-
截图0赞 · 0采集
-
- pinzaghi 2019-12-11
使用setInterval实现动画
-
截图0赞 · 0采集
-
- pinzaghi 2019-12-10
filter属性的一些常用值
-
截图0赞 · 0采集
-
- pinzaghi 2019-12-10
使用css3的filter属性设置为blur实现模糊效果
-
截图0赞 · 0采集
-
- 慕无忌0402515 2019-06-24
基本思路：
<canvas1 绘制blur的图像>
<canvas2 绘制清晰的图像，覆盖在1上，但通过控制剪切区域来控制其显示>
- 0赞 · 0采集
-
- 慕移动3597359 2018-11-06
我的笔记：
红包照片，canvas
- 0赞 · 0采集
-
- king0964 2018-10-10
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>
- 3赞 · 2采集
-
- Sky羽殇 2018-02-07
- 随机化剪辑区域2
-
截图0赞 · 0采集
-
- Sky羽殇 2018-02-07
- 随机化剪辑区域
-
截图0赞 · 0采集
-
- weibo_快刀青衣_0 2017-08-09
- monk路too噢噢噢哦哦
-
截图0赞 · 1采集
-
- 廖凝璇4033382 2017-07-10
- 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）阴影
-
截图0赞 · 2采集
-
- weibo_简爱之与_0 2017-07-09
- canvas的剪切api
-
截图0赞 · 0采集
-
- 椿萱紫荆 2017-03-21
- meta
- 0赞 · 0采集
-
- 慕粉1155147658 2017-03-14
- 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）阴影
- 0赞 · 0采集
-
- 慕粉1155147658 2017-03-14
- filter：blur（5px）--css3模糊属性
- 1赞 · 2采集
-
- 慕粉_昙大妞 2017-03-07
- css3模糊效果： filter：blur()
- 0赞 · 0采集
-
- 慕粉4076523 2017-02-21
- 3-5
- 0赞 · 0采集
-
- qq_何以笙箫默丶_03926592 2017-02-09
- 模糊：filter:blur(5px);
- 0赞 · 0采集
-
- sint0 2017-02-06
- Mark
- 0赞 · 0采集
-
- Mr_Jp黎 2017-01-21
- //filter模糊效果， filter:blur(5px); //浏览器兼容 -webkit-filter:blur(5px); -moz-filter:blur(5px); -ms-filter:blur(5px); -o-filter:blur(5x);
- 1赞 · 1采集
-
- Sunny132 2016-12-01
- Clip 函数的用法？
-
截图0赞 · 0采集
-
- 123456_0635 2016-11-24
- 线画圆弧
-
截图0赞 · 0采集
-
- 请叫我魔神 2016-10-09
- 模糊滤镜css filter：blur（5px）;
- 0赞 · 0采集
-
- W空格 2016-09-14
- Hgcjvivi机场接福福福龙路福楼痘痘新款花朵稀里哗啦和豆豆福利福利痘痘多痘痘出来混出来吃了好吃来凑凑凑凑福利凑凑凑凑出来吃了还出来出来出来好多次撸出来出来出来出来就出炉吃了好吃撸出来吃了好吃来凑凑凑成了出来聚聚了狗狗叫出来出来出来后擦屁股潮流粗来凑凑凑痤疮哭粗来
- 0赞 · 0采集
-
- 西西不小心 2016-09-05
- js3
-
截图0赞 · 0采集
-
- 西西不小心 2016-09-05
- js1
-
截图0赞 · 0采集
-
- 西西不小心 2016-09-05
- css2
-
截图0赞 · 0采集
-
- 西西不小心 2016-09-05
- css2
- 0赞 · 0采集
-
- 西西不小心 2016-09-05
- css1
-
截图0赞 · 0采集
