html代碼如下：
<!DOCTYPE?html>
<html>
<head>
<title>canvas</title>
<meta?charset="utf-8">
<link?rel="stylesheet"?type="text/css"?href="blur.css">
<script?src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"?type="text/javascript"></script>
</head>
<body>
<div?id="blur-div">
<img?id="blur-image"?src="image.jpg"/>
<canvas?id="canvas">
</canvas>
</div>
<script?type="text/javascript"?src="blur.js"></script>
</body>
</html>
JS代碼如下
var?canvasWidth?=?600
var?canvasHeight?=?900
var?canvas?=?document.getElementById("canvas")
var?context?=?canvas.getContext("2d")
canvas.width?=?canvasWidth
canvas.height?=?canvasHeight
//引入圖片
var?image?=?new?Image()
//剪輯區域
var?clippingRegion?=?{x:?300?,?y:?300?,?r:?50}
image.src?=?"image.jpg"
//加載完成圖片后進行初始化操作
image.onload?=?function(e){
initCanvas()
}
//初始化后將image圖像繪制在canvas中
function?initCanvas(){
draw(?image?,?clippingRegion?)
}
function?setClippingRegion(?clippingRegion?){
context.beginPath()
context.arc(?clippingRegion.x?,?clippingRegion.y?,?clippingRegion.r?,?0?,?Math.PI*2?,?false?)
context.clip()
}
//繪制圖像
function?draw(?image?,?clippingRegion?){
//清空內容
context.clearRect(0?,?0?,?canvas.width?,?canvas.height)
//存儲當前狀態
canvas.save()
//繪制圖像之前將剪輯區域設置好
setClippingRegion(?clippingRegion?)
//從左上角即0.0的位置繪制圖像，因為圖像和canvas大小一樣，所以無需更改大小
context.drawImage(image?,?0?,?0)
//繪制結束狀態恢復
context.restore()
}
2016-08-03
第60行代碼錯了
你寫的是canvas.save()
應該是context.save();