html5 canvas 缩放
2015年03月03日 11:33
0 点赞
0 评论
更新于 2025-11-21 16:37
关于 Canvas 坐标系统的疑问
在使用 HTML5 Canvas 时，很多人可能会有这样的疑惑：为什么 Canvas 的坐标是从左上角开始的，而且向下是 Y 轴的正方向，向右是 X 轴的正方向呢？这一设定可能不符合部分开发者的习惯，大家或许会期望能有更多的自定义功能。不过，我们可以通过代码来实现一些对 Canvas 画布的调整，下面就为大家展示一段包含 Canvas 画布移动、缩放和旋转等功能的代码。
代码实现
HTML 部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
margin: 20px auto;
padding: 0;
width: 1000px;
}
canvas {
border: dashed 2px #ccc;
}
span {
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body onload="drawRect('red');">
<canvas id="can" width="1000" height="800"></canvas>
<span onclick="mv_click();">移动</span>
<span onclick="zoom_click();">缩放</span>
<span onclick="rotate_click();">旋转</span>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
function drawRect(co) {
var can = $$('can');
var cans = can.getContext('2d');
cans.strokeStyle = co;
cans.lineWidth = 3;
cans.strokeRect(600, 50, 80, 40);
}
function drawCircle(co) {
var can = $$('can');
var cans = can.getContext('2d');
cans.beginPath();
cans.arc(30, 30, 30, 0, Math.PI * 2, true);
cans.closePath();
cans.strokeStyle = co;
cans.lineWidth = 3;
cans.stroke();
}
function mv_click() {
var can = $$('can');
var cans = can.getContext('2d');
cans.translate(40, 40);
drawRect('black');
}
function zoom_click() {
var can = $$('can');
var cans = can.getContext('2d');
drawCircle('red');
cans.scale(0.5, 1.5);
drawCircle('green');
}
function rotate_click() {
var can = $$('can');
var cans = can.getContext('2d');
cans.rotate(Math.PI * 2 / 360 * 45);
drawRect('green');
cans.rotate(-Math.PI / 4);
drawRect('black');
}
</script>
</body>
</html>
代码解释
$$函数：这是一个辅助函数，用于通过元素的 ID 获取 DOM 元素，简化了document.getElementById的调用。drawRect函数：该函数用于在 Canvas 上绘制一个矩形。它接受一个颜色参数co，设置矩形的边框颜色，边框宽度为 3 像素，矩形的位置和大小分别为(600, 50)开始，宽度为 80，高度为 40。drawCircle函数：此函数用于在 Canvas 上绘制一个圆形。同样接受一个颜色参数co，设置圆形的边框颜色，边框宽度为 3 像素，圆心坐标为(30, 30)，半径为 30。mv_click函数：实现了 Canvas 画布的移动功能。通过translate方法将画布的原点移动到(40, 40)位置，然后绘制一个黑色的矩形。zoom_click函数：实现了 Canvas 画布的缩放功能。首先绘制一个红色的圆形，然后使用scale方法将画布在 X 轴方向缩小为原来的 0.5 倍，在 Y 轴方向放大为原来的 1.5 倍，最后绘制一个绿色的圆形。rotate_click函数：实现了 Canvas 画布的旋转功能。先将画布顺时针旋转 45 度，绘制一个绿色的矩形，再将画布逆时针旋转 45 度，绘制一个黑色的矩形。
注意事项
在调整了 Canvas 画布后，后续的操作都会基于调整后的画布状态进行。因此，在进行绘制或其他操作时，一定要注意坐标的变化。
各功能总结
- 移动功能：通过
translate方法改变画布的原点位置，从而实现图形的移动。 - 缩放功能：使用
scale方法对画布进行缩放，可分别指定 X 轴和 Y 轴的缩放比例。 - 旋转功能：利用
rotate方法对画布进行旋转，旋转角度以弧度为单位。