Canvas标签绘制坐标变换图形

2023-12-22    分类: 网站建设

绘制图形的时候,我们可能经常会想到旋转图形,或者对图形使用变形处理,使用Canvas API的坐标轴变换处理功能,就能实现这种效果。

在计算机上绘制图形的时候,是以坐标点为基准来进行绘制的,默认情况下Canvas画布的最左上角对应于坐标轴的原点(0, 0)。前面我们所讲的所有利用Canvas API绘制出来的图形都是以画布最左上交为坐标轴圆点,并以像素为单位来进行绘制的。

如果对这个坐标轴进行改变,那么就可以实现图形的变换处理了。对坐标的变换处理有以下三种方式:

平移 使用图形上下文对象的translate方法移动坐标轴原点,该方法定义如下:

cantext.translate(x, y);

x:表示横坐标,也就是将坐标轴x从原点向【左】移动多少个单位,默认以像素为单位 y:表示纵坐标,也就是将坐标轴y从原点向【下】移动多少个单位,默认以像素为单位

扩大 使用图形上下文对象的scale方法将图形放大,该方法的定义如下所示: cantext.scale(x, y);

x:表示横坐标,也就是【水平方向】将图形放大的倍数 y:表示纵坐标,也就是【垂直方向】将图形放大的倍数 注:将图形缩小的时候,将这两个参数设置为0-1之间的小数就可以了,比如,0.5表示将图形缩小一半。

旋转 使用图形上下文对象的rotate方法将图形进行旋转,该方法的定义如下所示: cantext.rotate(angle);

angle:是指旋转的角度,旋转的中心点是坐标轴的原点。旋转方向为顺时针进行,要想逆方旋转,只需要设置为负数即可。

下面的案例,就是使用这三种坐标变换方式共同实现的下图效果:

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>HTML5每日一练之Canvas标签的应用-绘制坐标变换图形</title> <script type="text/javascript"> window.onload = function() { var canvas = document.getElementById("W3Cfuns_canvas"); var context = canvas.getContext("2d"); context.fillStyle = "#d4d4d4"; context.fillRect(0, 0, 400, 300); //绘制图形 context.translate(200, 25); context.fillStyle = "rgba(0, 0, 255, 0.25)"; for(var i = 0; i < 50; i++) { context.translate(25, 25); context.scale(0.95, 0.95); context.rotate(Math.PI / 10); context.fillRect(0, 0, 100, 50); } } </script> </head>

<body> <canvas id="W3Cfuns_canvas" width="600" height="400"></canvas> </body> </html>

文章标题:Canvas标签绘制坐标变换图形
本文URL:/news45/309795.html

成都网站建设公司_创新互联,为您提供网站建设网站改版全网营销推广网站营销微信小程序定制开发

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都网站建设