首页 > 软件操作教程 > 编程开发 > HTML
题目内容

HTML5 绘制图像 缩放对象

题目答案

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

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

【例题】缩放对象

代码如下:<!DOCTYFE html>

<html>

<head>

<meta charset="UTF - 8">

<title>Document</title>

<style> 

canvas{

border:2px solid red;

}

</style>

</head>

<body>

<canvas id="myCanvas" width="300" height="150"></canvas>

</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方法。

网友评论(共0条评论)

请自觉遵守互联网相关政策法规,评论内容只代表网友观点!

最新评论

点击加载更多评论>>

软件操作 新人注册送三重礼

已有 22658 名学员学习以下课程通过考试

相关视频试题

最需教育客户端 软件问题一手掌握

去 App Store 免费下载 iOS 客户端