<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<img id="scream" src="./平面封.jpg" alt="">
<canvas id="myCanvas" width="800" height="800"></canvas>
</div>
</body>
<style>
#myCanvas {
margin: 0;
padding: 0;
background-color: green;
}
</style>
<script>
var c = document.getElementById("myCanvas")
var ctx = c.getContext("2d")
var img = document.getElementById("scream")
var qz = new Image()
qz.src = img.src
img.onload = function(){
console.log(qz.width, qz.height)
let w = qz.width
let h = qz.height
let bl = 1
if (h > w) {
w = w / 10 * 6
h = h / 10 * 6
}
const x = (800 - w) / 2
const y = (800- h) / 2
ctx.drawImage(img, x, y , w, h)
}
</script>
</html>
效果图：
1249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
