您的位置:首页 > 其它

canvas 使绘制的图片在div 居中显示 ,解决绘图模糊问题

2018-01-19 18:29 2346 查看
一:绘图在div 居中显示:

首先把canvas当成未知的图片来处理,未知图片的居中显示如下:

二:绘图模糊

canvas作为画布,不能用css和style的方式设置宽高,他有自己特定的属性,width和height。不管当前的图片有多大,画布的宽高设置为图片的二倍,ctx.drawImge()绘制图片后,在用canvas的css再次定义,使其的宽高和图片大小一直,就可以解决canvas绘制图片模糊的问题。

实现代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.test-pic{
width:700px;
height: 400px;
margin: 20px auto;
border: 1px solid #000;
}
.test-pic div{
width:50%;
height: 100%;
float: left;
background: #f3f3f3;
position: relative;
}
.test-pic img {
width: 80%;
height: auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.test-pic canvas {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="test-pic">
<div id="test-pic-top" style="opacity: 1;">
<img src="http://img1.3lian.com/img013/v2/38/d/41.jpg">
</div>
<div>
<canvas id="myCanvas">

</canvas>
</div>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
var oImg = document.getElementsByTagName('img')[0];

var cImg = new Image();
cImg.onload = function() {
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');

// 设置画布的大小为图片大小的二倍
c.width = $('img').width()*2;
c.he
4000
ight = $('img').height()*2;

// 绘制图片
ctx.drawImage(oImg,0,0,c.width,c.height);

// 用css控制画布大小
c.style.width = $('img').width() + 'px';
c.style.height = $('img').height() + 'px';
}
cImg.src = oImg.src;
</script>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: