zoukankan      html  css  js  c++  java
  • 绘制变形图形

    概念:

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

    默认情况下,Canvas画布的最左上角对应于坐标轴的原点(0,0),并且是以一个像素为坐标单位进行绘制的!

    对坐标的变换处理,有以下三种方式:

    平移

    使用图形上下文对象的translate方法移动坐标轴原点,定义是这样的:context.translate(x,y),其中x代表坐标轴原点向左移动多少个单位,y代表坐标轴原点向下移动多少个单位!

    扩大

    使用图形上下文对象的scale方法将图形放大,定义是这样的:context.scale(x,y)

    旋转

    使用图形上下文对象的rotate方法将图形进行旋转,定义是这样的:context.rotate(angle),且旋转是以顺时针方向进行的,想要逆时针的话,改成负号即可!

    应用:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"/>
    <title>变形图形</title>
    <script>
    function draw(id){
    var canvas=document.getElementById(id);
    if(canvas==null)
    return false;
    var context=canvas.getContext('2d');
    context.fillStyle="#fff";
    context.fillRect(0,0,400,300);

    context.translate(200,50);
    context.fillStyle='rgba(255,0,0,0.25)';
    for(var i=9;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 οnlοad="draw('canvas');">
    <canvas id="canvas" width="400" height="300"/>

    </body>
    </html>

    代码引用


    版权声明:本文为CSDN博主「傲世阿龍」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/u010383937/article/details/72777953

  • 相关阅读:
    04-set方法的内存管理
    03-OC内存管理原则
    02-引用计数器的使用(含野指针、空指针)
    01-OC内存管理的基本原理
    16-NSDate
    15-NSValue
    14-NSNumber
    13-NSMutableDictionary
    12-NSDictionary(字典)
    11-NSArray和NSSet的区别
  • 原文地址:https://www.cnblogs.com/yanyanstyle/p/11335161.html
Copyright © 2011-2022 走看看