HTML5 绘制图像缩放对象

提问人：刘团圆发布时间：2020-11-14

在canvas中，也可以对canvas对象进行缩放操作，主要利用scale(x,y)方法实现。

scale这个方法有两个参数，分别代表x轴和y轴两个维度。每个参数在canvas显示图像的时候，向其传递在文本方向轴上图像要缩放的量。下面通过一个简单的实例来展示canvas的缩放功能。

【例题】缩放对象

代码如下：<!DOCTYFE html>

<html>

<head>

<title>Document</title>

<style>

canvas{

border:2px solid red;

}

</style>

</head>

<body>

</body>

<script〉

var myGanvas = document.getElementByld("myCanvas");

var context = myCanvas.getContext("2d");

var rectWidth = 150;

var rectHeight = 75;

//把绘制的对象移动到画布的中心位置

context.translate(myGanvas.width/2,myGanvas.height/2);

//把图像缩小成原来的一半

context.scale(1,0.5);

context.fillStyle="blue";

context.fillRect(-rectWidth/2,rectHeight/2,rectWidth,rectHeight);

</script>

</html>

在这个实例中，使用了translate方法。该方法用来制定新的原点坐标，后续操作都是相对于新的原点坐标来操作取值的。若要恢复原点坐标，可以使用restoreO方法。

相关视频回答

点击加载更多评论>>

HTML5 绘制图像 缩放对象