对图案进行缩小/扩大/旋转

最新推荐文章于 2024-08-09 18:46:14 发布

礼礼。

最新推荐文章于 2024-08-09 18:46:14 发布

阅读量76

点赞数

分类专栏： JS曲线文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45736311/article/details/113436545

版权

JS曲线专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用HTML5 Canvas API进行图像的旋转、扩大和缩小操作。通过JavaScript代码实例，作者演示了如何首先旋转图像45度，然后依次进行2倍扩大和0.3倍缩小，呈现了Canvas的几何变换能力。

摘要由CSDN通过智能技术生成

对图案进行缩小/扩大/旋转在这里插入图片描述

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rotate(45*Math.PI/180); //对图像进行旋转45度
//原本大小 1
ctx.strokeRect(150,50,80,80);
//扩大2倍  2
ctx.scale(2,2);
ctx.strokeRect(150,50,80,80);
//在扩大2倍的基础上 缩小0.3倍  3
ctx.scale(0.3,0.3);
ctx.strokeRect(150,50,80,80);

</script> 
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

礼礼。

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
对图案进行缩小/扩大/旋转

对图案进行缩小/扩大<!DOCTYPE html><html><body><canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas><script>var c=document.getElem
复制链接

扫一扫