会员: 69,648 位,商品: 50,500 件,下载: 615,999 次,人气: 1,063,610
当前位置:派多网 > 资讯 > 站长学院 > 网站运营 > HTML5每日一练之Canvas标签的应用-绘制坐标变换图形...

HTML5每日一练之Canvas标签的应用-绘制坐标变换图形

摘要:绘制图形的时候,我们可能经常会想到旋转图形,或者对图形使用变形处理,使用Canvas API的坐标轴变换处理功能,就能实现这种效果。 在计算机上绘制图形的时候,是
       绘制图形的时候,我们可能经常会想到旋转图形,或者对图形使用变形处理,使用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>



  • 全部评论(0)
10余攻防经验,全力保护网站业务安全
最新资讯
【行业资讯|】万德股票配资系统|股票配资系统APP开发|专业股票配资系统开发(2019-12-30)
【行业资讯|】个人免签支付系统/支付宝转账/微信固码/云闪付/拉卡拉等(2019-11-18)
【行业资讯|】万德股票配资系统股票配资系统APP开发专业股票配资系统开发(2019-11-09)
【站长学院|网站运营】内存释放专家,丢服务器自动释放内存 非常给力(2018-10-28)
【站长学院|网站运营】CentOS安装教程(CentOS 6.4图文安装)(2018-10-28)
【站长学院|网站运营】XP正在启动windows时间长或卡住解决方法(2018-10-28)
【站长学院|网站运营】Stingray Traffic Manager配置教程(2018-10-28)
【站长学院|网站运营】XP系统IIS安装配置图解(2018-10-28)
【站长学院|网站运营】系统提示打印后台程序服务没有运行、RPC 服务器不可用图文教程(2018-10-28)
【站长学院|网站运营】Ghost镜像安装器使用方法(2018-10-28)