竟然不显示，好纠结
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>h5</title>
<script src="js/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/h5.css" />
</head>
<body>
<div id="blur-div">
<img src="bg.jpg" id="blur-img" />
<canvas id="canvas"></canvas>
</div>
<script src="js/h5.js"></script>
</body>
</html>
JS
var canvasWidth=800
var canvasHeight=600
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
canvas.width = canvasWidth;
canvas.height = canvasHeight;
var image = new Image();
var clippingRegion={x:400,y:200,r:50}
image.src='bg.jpg';
image.onload=function(e){
initCanvas();
}
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);
context.save();
setClippingRegion( clippingRegion )
context.drawImage(image,0,0);
context.restore();
}
nnh11回答
-
Caballarii
可以显示，但你得确保你的图片和js的路径地址正确，具体可以在Chrome的F12的console中查看错误
随时随地看视频慕课网APP
相关分类
Html5