canvas在和jq.width()设置宽高的时候会出现拉伸情况。
产生拉伸的方式
能产生拉伸的还有行间style样式也会产生变形拉伸canvas.style.width = "1000px";也会产生变形百分比也会产生变形
不会拉伸的方式
直接写width，height不会产生变形
$('#myCanvas').attr('width',width)
<img id='source' src="https://img.lookcss.com/posters.jpg" style="display: none;" />
<canvas id="myCanvas">
</canvas>
<button class="btn" style="padding:20px">生成海报</button>
<script>
$(function () {
var w = $(window).width()
var h = $(window).height()
var cvs = document.getElementById('myCanvas');
var ctx = cvs.getContext('2d')
$('#myCanvas').width(w)
$('#myCanvas').height(h)
var imgPath = document.getElementById('source');
ctx.drawImage(imgPath, 0, 0, 445, 790, 0, 0, 445, 790)
//这样的canvas会出现拉伸情况
$(".btn ").click(function () {
$('#myCanvas').attr('width', w-10)
$('#myCanvas').attr('height', h-10)
//使用attr或者canvas直接指定宽高的话不会出现问题
ctx.drawImage(imgPath, 0, 0, 445, 790, 0, 0, 445, 790)
});
)}
</script>
本文著作权归作者 [ admin ] 享有，未经作者书面授权，禁止转载，封面图片来源于 [ 互联网 ] ，本文仅供个人学习、研究和欣赏使用。如有异议，请联系博主及时处理。
