前面一切正常，但是设置剪辑区域时小圆显示不出来。代码如下，帮看看错了吗？-慕课网

前面一切正常，但是设置剪辑区域时小圆显示不出来。代码如下，帮看看错了吗？

来源：3-2 绘制图像及使用剪辑区域

化骨神石

2016-08-03 13:38

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()
}

写回答关注