HTML5教程-用Canvas标签绘制坐标变换图形

最新推荐文章于 2024-05-06 13:33:37 发布

yixuan_1

最新推荐文章于 2024-05-06 13:33:37 发布

阅读量1.3k

点赞数

分类专栏：精通HTML5 文章标签： html5教程 canvas web前端开发

精通HTML5 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

HTML5教程-用Canvas标签绘制坐标变换图形

绘制图形的时候，我们可能经常会想到旋转图形，或者对图形使用变形处理，使用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>

本文原地址：http://www.sitejs.cn/sitejs-12748-1.html

yixuan_1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5教程-用Canvas标签绘制坐标变换图形

HTML5教程-用Canvas标签绘制坐标变换图形绘制图形的时候，我们可能经常会想到旋转图形，或者对图形使用变形处理，使用Canvas API的坐标轴变换处理功能，就能实现这种效果。在计算机上绘制图形的时候，是以坐标点为基准来进行绘制的，默认情况下Canvas画布的最左上角对应于坐标轴的原点(0, 0)。前面我们所讲的所有利用Canvas API绘制出来的图形都是以画布最左上交
复制链接

扫一扫