2020-03-30 canvas画布自适应父div
2020-03-30 本文已影响0人
夜色001
使用canvas画图时，我们希望当改变窗口大小，画布随窗口自适应改变画布大小。
我们要注意两个参数：canvas width属性、和style的width属性。
前者是画布的大小，我们可以将其设置成固定大小。这样后续画图坐标就可以使用绝对值了。
后者是canvas相对于父元素的大小，canvas窗口会根据该值进行缩放，设置成100%。
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function drawDiagonal(id){
var canvas=document.getElementById(id);
var context=canvas.getContext("2d");
context.beginPath();
context.moveTo(20,20);
context.lineTo(80,80);
context.stroke();
}
window.onload=function(){
drawDiagonal("diagonal1");d
}
</script>
</head>
<body sytle="text-align:center">
<div style="width:50%;margin:0 auto">
<canvas id="diagonal1" style="border:1px solid;width:100%;" width="100px" height="100px"></canvas>
</div>
</body>
</html>
