Canvas图片模糊效果（学习笔记）

Missj1218

于 2017-02-15 17:55:19 发布

阅读量2.4k

点赞数

分类专栏： HTML5应用开发

本文链接：https://blog.csdn.net/u013096666/article/details/55213144

版权

这篇博客主要介绍了如何使用Canvas实现图片模糊效果，包括CSS3的filter属性和Canvas的基本操作。此外，还探讨了在适配手机端时，如处理canvas尺寸、image尺寸和剪辑尺寸等问题，以达到良好的屏幕显示效果。

摘要由CSDN通过智能技术生成

Canvas图片模糊效果学习视频：http://www.imooc.com/learn/601

Demo和学习笔记

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas玩儿转红包照片</title>

<script type="text/javascript" src="js/jquery.js"></script>
<link href="css/blur.css" rel="stylesheet" type="text/css">
<!-- 
	手机端适配
 -->
<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" />		<!-- 不允许用户缩放尺寸 -->
</head>
<body>
	<div id="blur-div">
		<img src="images/image.jpg" id="blur-image">
		<canvas id="canvas">
		</canvas>
		<a href="javascr