-
使用viewport的meta（元信息）設(shè)置屏幕寬度信息
查看全部 -
使用clearInterval來停止setInterval
查看全部 -
使用setInterval實現(xiàn)動畫
查看全部 -
filter屬性的一些常用值
查看全部 -
使用css3的filter屬性設(shè)置為blur實現(xiàn)模糊效果
查看全部 -
基本思路：
<canvas1 繪制blur的圖像>
<canvas2 繪制清晰的圖像，覆蓋在1上，但通過控制剪切區(qū)域來控制其顯示>
查看全部 -
我的筆記：
紅包照片，canvas
查看全部 -
https://github.com/king0964/canvasExample.git（實現(xiàn)五角星旋轉(zhuǎn)和刮刮卡效果）
實現(xiàn)老師的五角星旋轉(zhuǎn)效果：
<!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玩兒轉(zhuǎn)紅包照片</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, //圖片左邊距（自適應(yīng)方法是根據(jù)屏幕大小截取圖片中間部分顯示）
? ? ? ? topMargin = 0,
? ? ? ? rot = 0; //旋轉(zhuǎn)角度
? ? 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'; //賦值外邊框?qū)捀?/p>
? ? ? ? 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);
? ? ? ? // 復(fù)雜寫法是為了兼容圖片寬高小于畫布寬高
? ? ? ? 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();
? ? ? ? // 狀態(tài)
? ? ? ? context.strokeStyle = strokeColor;
? ? ? ? // 設(shè)置
? ? ? ? context.stroke();
? ? }
? ? </script>
</body>
</html>
查看全部 -
隨機化剪輯區(qū)域2查看全部
-
隨機化剪輯區(qū)域查看全部
-
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）陰影查看全部
舉報