文章目录
- 前言
- 示例-图像的缩放
- 在 Canvas 边界之外绘制图像
前言
在上节中读者已经学会了如何使用 drawImage() 方法将一幅未经缩放的图像绘制到 canvas 之中。现在我们就来看看如何用该方法在绘制图像的时候进行缩放
示例-图像的缩放
未缩放的图像，显示图形原有大小。
缩放后的图像，将图形的宽高放到到和 canvas 大小一致。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>4-2-图像的缩放</title>
<style>
body {
background: #eeeeee;
}
#canvas {
background: #ffffff;
margin-top: 5px;
margin-left: 10px;
-webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div id="controls">
<input id="scaleCheckbox" type="checkbox" />
缩放图片
</div>
<canvas id="canvas" width="1000" height="600">canvas not supports</canvas>
<script>
'use strict'
let canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
image = new Image(),
scaleCheckbox = document.getElementById('scaleCheckbox')
let drawImage = () => {
context.clearRect(0, 0, canvas.width, canvas.height)
if (scaleCheckbox.checked) {
context.drawImage(image, 0, 0, canvas.width, canvas.height)
} else {
context.drawImage(image, 0, 0)
}
context.restore()
}
scaleCheckbox.onchange = (e) => {
drawImage()
}
image.src = './waterfall.png'
image.onload = () => {
context.drawImage(image, 0, 0)
}
</script>
</body>
</html>
在 Canvas 边界之外绘制图像
图像可以绘制在 canvas 之内，也可以通过指定坐标值将图像绘制在它之外。在应用程序放大倍数大于 1.0 的情况下，就会把图像的绘制点指定到 canvas 外面去。
如果你向 canvas 之中绘制的图像有一部分会落在 canvas 的范围之外，那么浏览器就会将 canvas 范围外的那部分图像忽略。
可以在 canvas 范围之外进行绘制，这是一项重要的功能。我们把图像绘制在 canvas 范围外，并且通过平移 canvas 的坐标系来让背景中的某一部分内容显示在当前视窗范围内。
示例：将缩放后的图片绘制于Canvas中央
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>4-4-图像的缩放</title>
<style>
/* 设置页面背景颜色 */
body {
background: rgba(100, 145, 250, 0.3);
}
/* 调整滑动条的对齐和大小 */
#scaleSlider {
vertical-align: 10px;
width: 100px;
margin-left: 90px;
}
/* 设置画布的边距、边框和光标样式 */
#canvas {
margin: 10px 20px 0px 20px;
border: thin solid #aaa;
cursor: crosshair;
}
/* 调整控制面板的边距和内边距 */
#controls {
margin-left: 15px;
padding: 0;
}
/* 设置缩放比例显示框的位置、大小和样式 */
#scaleOutput {
position: absolute;
width: 60px;
height: 30px;
margin-left: 10px;
vertical-align: center;
text-align: center;
color: blue;
font: 18px Arial;
text-shadow: 2px 2px 4px rgba(100, 140, 250, 0.8);
}
</style>
</head>
<body>
<div id="controls">
<div id="scaleOutput">1.0</div>
<input type="range" id="scaleSlider" min="1" max="3.0" step="0.1" value="1.0" />
</div>
<canvas id="canvas" width="800" height="520"> canvas not supports </canvas>
<script>
// 获取HTML元素
const canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
scaleSlider = document.getElementById('scaleSlider'),
scaleOutput = document.getElementById('scaleOutput'),
MIN_SCALE = 1.0,
MAX_SCALE = 3.0
let scale = 1.0
const image = new Image()
// 绘制图像的函数
function drawImage() {
const w = canvas.width,
h = canvas.height,
sw = w * scale,
sh = h * scale
context.clearRect(0, 0, w, h)
context.drawImage(image, w / 2 - sw / 2, h / 2 - sh / 2, sw, sh)
}
// 更新缩放比例文本的函数
function drawScaleText(value) {
const text = parseFloat(value).toFixed(1)
let percent = parseFloat(value - MIN_SCALE) / parseFloat(MAX_SCALE - MIN_SCALE)
scaleOutput.textContent = text
percent = percent < 0.35 ? 0.35 : percent
scaleOutput.style.fontSize = (percent * MAX_SCALE) / 1.5 + 'em'
}
// 滑动条的事件处理函数
scaleSlider.onchange = (e) => {
scale = e.target.value
if (scale < MIN_SCALE) {
scale = MIN_SCALE
} else if (scale > MAX_SCALE) {
scale = MAX_SCALE
}
drawScaleText(scale)
drawImage()
}
// 初始化画布样式
context.fillStyle = 'rgba(100, 140, 250, 0.5)'
context.strokeStyle = 'yellow'
context.shadowColor = 'rgba(50, 50, 50, 1.0)'
context.shadowOffsetX = 5
context.shadowOffsetY = 5
context.shadowBlur = 10
// 设置图像源
image.src = 'waterfall.png'
// 图像加载完成后的事件处理函数
image.onload = () => {
drawImage()
drawScaleText(scaleSlider.value)
}
</script>
</body>
</html>
