• html5 -- Canvas


    Canvas绘制简单图形

    一、绘制文字

      fillText(text, x, y[, maxWidth]) -- 填充方式

      strokeText(text, x, y[, maxWidth]) -- 描边方式

      实例:  

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>绘制文字</title>
     6 </head>
     7 <body>
     8     <canvas id="addText" height="70px" width="550px"></canvas>
     9     <div>
    10         <p>
    11             &nbsp;&nbsp;&nbsp;&nbsp;古时候,楚国有一家人,祭完祖宗之后,准备将祭祀用的一壶酒,赏给帮忙办事的人员喝。参加的人很多,这壶酒如果大家都喝是不够的,若是让一个人喝,那能喝得有余。这一壶酒到底怎么分呢?<br>
    12             &nbsp;&nbsp;&nbsp;&nbsp;大家都安静下来,这时有人建议:每个人在地上画一条蛇,谁画得快又画得好,就把这壶酒归他喝。大家都认为这个方法好,都同意这样做。于是,在地上画起蛇来。<br>
    13             &nbsp;&nbsp;&nbsp;&nbsp;有个人画得很快,一转眼最先画好了,他就端起酒壶要喝酒。但是他回 头看看别人,还都没有画好呢。心里想:他们画得真慢。又想显示自己的本领, 他洋洋得意地说: “你们画得好慢啊!我再给蛇画几只脚也不算晚呢!”于是,他便左手提着酒壶,右手拿了一根树枝,给蛇画起脚来。<br>
    14             &nbsp;&nbsp;&nbsp;&nbsp;正在他一边画着脚,一边说话的时候,另外一个人已经画好了。那个人 马上把酒壶从他手里夺过去,说:"你见过蛇吗?蛇是没有脚的,你为什么要给它添上脚呢?所以第一个画好蛇的人不是你,而是我了!"<br>
    15             &nbsp;&nbsp;&nbsp;&nbsp;那个人说罢就仰起头来,咕咚咕咚把酒喝下去了。
    16         </p>
    17     </div>
    18 
    19     <script>        
    20         window.addEventListener("load", function (){
    21             var canvas = document.getElementById('addText');
    22             if (canvas && canvas.getContext) {
    23                 var context = canvas.getContext("2d");
    24                 context.fillStyle = "#00f";
    25                 context.font = "italic 15px sans-serif";
    26                 /*
    27                  * textBaseline -- 设置文字相对于起点的位置
    28                  * 取值包括 top hanging middle alphabetic ideographic(默认值) bottom
    29                  */
    30                 context.textBaseline = "bottom";
    31                 /*
    32                  * textAlign -- 设置文字的对齐方式
    33                  * 取值包括 start(默认值) end left right center
    34                  */
    35                 context.textAlign = "start";                
    36                 /*
    37                  * context.fillText(text, x, y[, maxwidth])
    38                  * 表示以填充的方式描绘文字
    39                  */
    40                 context.fillText("(比喻做了多余的事,反而有害无利,徒劳无功。)", 160, 50);
    41 
    42                 context.strokeStyle = "#faa";    //设置颜色
    43                 context.font = "bold 30px sans-serif";
    44                 /*
    45                  * context.strokeText(text, x, y[, maxwidth])
    46                  * 表示已描边的方式绘制文字
    47                  */
    48                 context.strokeText("画蛇添足", 30, 50);
    49             }
    50         }, true);
    51     </script>
    52 </body>
    53 </html>

    二、绘制矩形

      fillRect(x, y, width, height) -- 实心矩形

      strokeRect(x, y, width, height) -- 空心矩形

      clearRect(x, y, width, height) -- 清除指定区域的像素

      实例:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>绘制矩形</title>
     6     <style>
     7         canvas{
     8             float: left;
     9             margin-right: 30px;
    10         }
    11     </style>
    12 </head>
    13 <body>
    14     <canvas id="rect1" height="250px" width="250px"></canvas>
    15 
    16     <canvas id="rect2" height="250px" width="250px"></canvas>
    17 
    18     <canvas id="rect3" height="250px" width="250px"></canvas>
    19 
    20     <script>
    21         window.addEventListener("load", function(){
    22             var canvas = document.getElementById('rect1');
    23             if (canvas && canvas.getContext) {
    24                 var context = canvas.getContext("2d");
    25                 // context.fillStyle = "#fbb";
    26                 context.strokeStyle = "#fbb";
    27                 context.lineWidth = 1;
    28                 // context.fillRect(25,65,200,120);
    29                 context.strokeRect(25,65,200,120)
    30             }
    31         }, true);
    32         window.addEventListener("load", function(){
    33             var canvas = document.getElementById('rect2');
    34             if (canvas && canvas.getContext) {
    35                 var context = canvas.getContext("2d");
    36                 context.fillStyle = "#fbb";
    37                 context.strokeStyle = "#666";
    38                 context.lineWidth = 1;
    39                 /*
    40                  * context.strokeRect(x, y, width, height) -- 绘制实心矩形
    41                  * 坐标原点为画布左上角
    42                  */
    43                 context.fillRect(25,25,200,200);
    44                 /*
    45                  * context.strokeRect(x, y, width, height) -- 绘制空心矩形
    46                  * 坐标原点为画布左上角
    47                  */
    48                 context.strokeRect(25,25,200,200)
    49             }
    50         }, true);
    51         window.addEventListener("load", function(){
    52             var canvas = document.getElementById('rect3');
    53             if (canvas && canvas.getContext) {
    54                 var context = canvas.getContext("2d");
    55                 context.fillStyle = "#fbb";
    56                 context.strokeStyle = "#666";
    57                 context.lineWidth = 1;
    58                 context.fillRect(65,25,120,200);
    59                 // context.strokeRect(65,25,120,200);
    60                 /*
    61                  * context.clearRect(x, y, width, height) -- 清除指定区域的像素
    62                  * 坐标原点为画布左上角
    63                  */
    64                 context.clearRect(65,65,50,50);
    65             }
    66         }, true);
    67     </script>
    68 </body>
    69 </html>

    三、绘制线段(三角形)

      步骤:

        1、beginPath() -- 创建路径

        2、moveTo(x, y) -- 将当前位置移到新目标坐标,并作为要绘制线段的起点坐标

        3、lineTo(x, y) -- 线段指定目标坐标(线段终点坐标)

        4、stroke() -- 绘制图形边框

        5、fill() -- 填充图形(依情况自选)

        6、closePath() -- 关闭路径(可选)

      实例:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>绘制直线</title>
     6     <style>
     7         canvas{
     8             float: left;
     9             margin-right: 30px;
    10         }
    11     </style>
    12 </head>
    13 <body>
    14     <canvas id="line1" height="200px" width="170px"></canvas>
    15 
    16     <canvas id="line2" height="200px" width="250px"></canvas>
    17 
    18     <canvas id="line3" height="200px" width="250px"></canvas>
    19 
    20     <script>
    21         window.addEventListener("load", function(){
    22             var canvas = document.getElementById('line1');
    23             if (canvas && canvas.getContext) {
    24                 var context = canvas.getContext("2d");
    25                 /*
    26                  * 绘制直线步骤:
    27                  * 1、创建路径 -- beginPath()
    28                  * 2、设置起始点坐标 -- moveTo(x,y)
    29                  * 3、设置目标点坐标 -- lineTo(x,y)
    30                  * 4、绘制图形的边框 -- 调用stroke()函数绘制图形,若图形不是一条直线,可选择使用fill()填充
    31                  * 5、填充 -- fill()  可选,用于可填充图形
    32                  * 6、关闭路径 -- closePath()  可选
    33                  */
    34                 context.beginPath();    //开始创建路径
    35                 context.lineWidth = 1;
    36                 context.moveTo(20,100);    //起始点坐标
    37                 context.lineTo(150,100);//目标点坐标
    38                 context.stroke();        //调用stroke函数绘制直线
    39                 context.closePath();    //关闭路径
    40             }
    41         }, true);
    42         window.addEventListener("load", function(){
    43             var canvas = document.getElementById('line2');
    44             if (canvas && canvas.getContext) {
    45                 var context = canvas.getContext("2d");
    46                 context.beginPath();    //开始创建路径
    47                 context.lineWidth = 1;
    48                 context.moveTo(160,50);    //起始点坐标
    49                 context.lineTo(50,100);    //目标点坐标
    50                 context.lineTo(160,185);//目标点坐标
    51                 context.stroke();        //调用stroke函数绘制直线
    52             }
    53         }, true);
    54         window.addEventListener("load", function(){
    55             var canvas = document.getElementById('line3');
    56             if (canvas && canvas.getContext) {
    57                 var context = canvas.getContext("2d");
    58                 context.beginPath();    //开始创建路径
    59                 context.lineWidth = 1;
    60                 context.moveTo(160,50);    //起始点坐标
    61                 context.lineTo(50,100);    //目标点坐标
    62                 context.lineTo(160,185);//目标点坐标
    63                 context.fill();            //调用fill()函数绘制图形
    64             }
    65         }, true);
    66     </script>
    67 </body>
    68 </html>

    四、绘制圆形

      arc(x, y, radius, startAngle, endAngle, anticlockwise)

      各参数含义:

        x -- 绘制圆形的起点横坐标

        y -- 绘制圆形的起点纵坐标

        radius -- 绘制圆形半径

        startAngle -- 开始角度,取值为 Math.PI * n,Math.PI 表示180度

        endAngle -- 结束角度,取值为 Math.PI * n,Math.PI 表示180度

        anticlockwise -- 是否按照顺时针方向进行绘制,取值为 true 和 false

      实例: 

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>绘制圆形</title>
     6     <style>
     7         canvas{
     8             float: left;
     9             margin-right: 30px;
    10         }
    11     </style>
    12 </head>
    13 <body>
    14     <canvas id="circle1" height="180" width="190"></canvas>
    15 
    16     <canvas id="circle2" height="180" width="190"></canvas>
    17 
    18     <canvas id="circle3" height="180" width="190"></canvas>
    19 
    20     <canvas id="circle4" height="180" width="190"></canvas>
    21 
    22     <script>
    23 
    24         function GetContext(id){
    25             var canvas = document.getElementById(id);
    26             if (canvas && canvas.getContext) {
    27                 var context = canvas.getContext("2d");
    28                 return context;
    29             }
    30         }
    31 
    32         window.addEventListener("load", function(){
    33             var context = GetContext("circle1");
    34             context.beginPath();
    35             /*
    36              * arc(x,y,radius,startAngle,endAngle,anticlockwise) 
    37              * x, y 表示绘制圆形起点的横纵坐标
    38              * anticlockwise 表示是否按照顺时针方向进行绘制,取值为 true 和 false
    39              * Math.PI 表示角度为180度
    40              */
    41             context.arc(80, 80, 60, Math.PI, Math.PI * 2, true);
    42             context.stroke();
    43         }, true);
    44         window.addEventListener("load", function(){
    45             var context = GetContext("circle2");
    46             context.beginPath();
    47             context.arc(80, 80, 60, 0, Math.PI * 2 / 4, true);
    48             context.fill();
    49         }, true);
    50         window.addEventListener("load", function(){
    51             var context = GetContext("circle3");
    52             context.beginPath();
    53             context.arc(80, 80, 60, Math.PI, (Math.PI * 2 / 4) * 3, false);
    54             context.fill();
    55         }, true);
    56         window.addEventListener("load", function(){
    57             var context = GetContext("circle4");
    58             context.beginPath();
    59             context.arc(80, 80, 60, 0, Math.PI * 2, true);
    60             context.stroke();
    61         }, true);
    62     </script>
    63 </body>
    64 </html>

    五、绘制渐变图形

      创建渐变图形的步骤:

        1、创建线性或径向渐变对象

        2、为渐变对象设置颜色

        3、在上下文对象上为填充样式或描边样式设置渐变

      (一)、线性渐变

        createLinearGradient(xStart, yStart, xEnd, yEnd) -- 创建渐变对象

        addColorStop(offset, color) -- 设置渐变颜色(参数 offset 表示渐变偏移量,取值为 0~1)

       实例: 

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>绘制线性渐变</title>
     6 </head>
     7 <body>
     8     <canvas width="320" height="150" id="canvas"></canvas>
     9 
    10     <div><canvas id="title" height="30"></canvas></div>
    11 
    12     <div><canvas id="context" height="115" width="378"></canvas></div>
    13 
    14     <script>
    15 
    16         function GetContext(id){
    17             var canvas = document.getElementById(id);
    18             if (canvas && canvas.getContext) {
    19                 var context = canvas.getContext("2d");
    20                 return context;
    21             }
    22         }
    23 
    24         window.addEventListener("load", function(){
    25             var ctx = GetContext("canvas");
    26             /*
    27              * context.createLinearGradient(xStart, yStart, xEnd, yEnd)
    28              * 创建渐变对象
    29              */
    30             var lingrad1 = ctx.createLinearGradient(0, 0, 0, 150);
    31             /*
    32              * addColorStop(offset, color)
    33              * 设置渐变颜色
    34              * offset 表示所设定的颜色离开渐变起始点的偏移量,取值为 0-1
    35              * 0 表示渐变起始点的偏移量
    36              * 1 表示渐变结束点的偏移量
    37              */
    38             lingrad1.addColorStop(0, '#00abeb');
    39             lingrad1.addColorStop(0.5, '#fff');
    40             lingrad1.addColorStop(0.5, '#26c000');
    41             lingrad1.addColorStop(1, '#fff');
    42 
    43             var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
    44             lingrad2.addColorStop(0.5, '#000');
    45             lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)');
    46 
    47             ctx.fillStyle = lingrad1;
    48             ctx.strokeStyle = lingrad2;
    49 
    50             ctx.fillRect(10, 10, 300, 130);
    51             ctx.strokeRect(50, 50, 210, 210);
    52         });
    53 
    54         window.addEventListener("load", function(){
    55             var ctx = GetContext("title");
    56             ctx.font = "italic 15px sans-serif";
    57             ctx.strokeText("绘制线性渐变", 90, 20);
    58         });
    59 
    60         window.addEventListener("load", function(){
    61             var ctx = GetContext("context");
    62             ctx.font = "italic 15px sans-serif";
    63             ctx.fillText("本案例实现线性渐变的功能,主要使用到了 Linear", 15, 20);
    64             ctx.fillText("rGradient 对象的 addColorStop()函数、context对象的", 0, 40);
    65             ctx.fillText("fillStyle 和 StrokeStyle属性及 fillRect()函数和st", 0, 60);
    66             ctx.fillText("rokeRect()函数", 0, 80);
    67         });
    68     </script>
    69 </body>
    70 </html>

      (二)、径向渐变

        createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd) -- 创建渐变对象

        addColorStop(offset, color) -- 设置渐变颜色(参数 offset 表示渐变偏移量,取值为 0~1)

       实例: 

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>绘制径向渐变</title>
     6 </head>
     7 <body>
     8     <canvas id="canvas" width="500" height="250" style="border: 1px solid #f00;"></canvas>
     9 
    10     <script>
    11         window.addEventListener("load", function(){
    12             var canvas = document.getElementById('canvas');
    13             var ctx = canvas.getContext("2d");
    14 
    15             /*
    16              * context.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)
    17              * 创建径向渐变对象
    18              * 参数分别表示 开始圆的圆心横纵坐标,开始圆的半径,结束圆的圆心横纵坐标,结束圆的半径
    19              */
    20             var g1 = ctx.createRadialGradient(400, 0, 0, 400, 0, 400);
    21             g1.addColorStop(0.1, "rgb(255, 255, 0)");
    22             g1.addColorStop(0.3, "rgb(0, 255, 255)");
    23             g1.addColorStop(0.5, "rgb(255, 0, 255)");
    24             ctx.fillStyle = g1;
    25             ctx.fillRect(0, 0, 500, 300);
    26 
    27             // var n = 0;
    28             var g2 = ctx.createRadialGradient(250, 250, 0, 250, 250, 300);
    29             g2.addColorStop(0.1, "rgba(43, 255, 243, 0.3)");
    30             g2.addColorStop(0.7, "rgba(255, 255, 0, 0.5)");
    31             g2.addColorStop(1, "rgba(0, 0, 255, 0.8)");
    32 
    33             for (var i = 0; i < 10; i++) {
    34                 ctx.beginPath();
    35                 ctx.fillStyle = g2;
    36                 ctx.arc(i * 25, i * 25, i * 10, 0, Math.PI, true);
    37                 ctx.closePath();
    38                 ctx.fill();
    39             }
    40         });
    41     </script>
    42 </body>
    43 </html>

    六、为图形绘制阴影

      shadowOffsetX -- 阴影水平方向偏移量,默认值为1

      shadowOffsetY -- 阴影垂直方向偏移量,默认值为1

      shadowBlur -- 阴影模糊范围,取值为 0~10,默认值为1

      shadowolor -- 阴影颜色, 默认为全透明黑色

      实例:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>绘制阴影</title>
     6 </head>
     7 <body onload="PicShadow(), TxtShadow()">
     8     <canvas width="300" height="220" id="canvas1"></canvas>
     9     <canvas width="300" height="220" id="canvas2"></canvas>
    10 
    11     <script>
    12         function PicShadow(){
    13             var canvas = document.getElementById('canvas1');
    14             var ctx = canvas.getContext("2d");
    15             ctx.shadowOffsetX = 15;
    16             ctx.shadowOffsetY = 15;
    17             ctx.shadowBlur = 10;
    18             ctx.shadowColor = "rgba(100, 200, 100, 0.5)";
    19             ctx.fillStyle = "#bbf";
    20             ctx.arc(150, 100, 80, 0, Math.PI * 2, true);
    21             ctx.fill();
    22         }
    23 
    24         function TxtShadow(){
    25             var canvas = document.getElementById('canvas2');
    26             var ctx = canvas.getContext("2d");
    27             ctx.shadowOffsetX = -5;
    28             ctx.shadowOffsetY = -5;
    29             ctx.shadowBlur = 1;
    30             ctx.shadowColor = "rgba(255, 125, 255, 0.5)";
    31             ctx.strokeStyle = "#bbf";
    32             ctx.font = "italic 25px sans-serif";
    33             ctx.strokeText("实现文字和图形阴影", 30, 100);
    34             ctx.stroke();
    35         }
    36     </script>
    37 </body>
    38 </html>

    七、绘制变形图形

      (一)、保存和回复状态以及输出图像

        save() -- 保存

        restore() -- 恢复状态

          注意:  save方法用于临时保存画布坐标系统的状态;

               restore方法可以用来恢复save之后设置的状态即回到save之前的状态;

               save和restore 方法必须是配对使用的;

               restore方法前必须有save方法,不然会报Underflow in restore错误;

               restore方法的调用只影响restore之后绘制的内容

       实例:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>绘制变形图形1 -- 保存和恢复状态</title>
     6 </head>
     7 <body>
     8     <canvas id="canvas" width="250" height="250" style="margin-left: 100px;"></canvas>
     9 
    10     <script>
    11         window.addEventListener("load", function(){
    12             var ctx = document.getElementById('canvas').getContext("2d");
    13             ctx.fillStyle = "#fbb";
    14             ctx.fillRect(0, 0, 250, 250);
    15             ctx.save();
    16             ctx.fillStyle = "#00f";
    17             ctx.fillRect(15, 15, 220, 220);
    18             ctx.save();
    19             ctx.fillStyle = "#bbf";
    20             ctx.globalAlpha = 0.5;
    21             ctx.fillRect(30, 30, 190, 190);
    22             ctx.restore();
    23             ctx.fillRect(45, 45, 160, 160);
    24             ctx.restore();
    25             ctx.fillRect(60, 60, 130, 130);
    26             /*
    27              * save方法用于临时保存画布坐标系统的状态
    28              * restore方法可以用来恢复save之后设置的状态即回到save之前的状态
    29              * save和restore方法必须是配对使用的
    30              * restore方法前必须有save方法,不然会报Underflow in restore错误
    31              * restore方法的调用只影响restore之后绘制的内容
    32              */        
    33         });
    34     </script>
    35 </body>
    36 </html>

        toDataURL(type) -- 输出图像  

      实例:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>绘制变形图形2 -- 输出图像</title>
     6 </head>
     7 <body>
     8     <canvas id="canvas" width="260" height="260" style="margin-left: 200px;"></canvas>
     9     <input type="button" value="输出图像" onclick="javascript: showImg();">
    10     <img id="img1" width="150" height="150">
    11 
    12     <script>
    13         function showImg(){
    14             /*
    15              * canvas.toDataURL(type)
    16              * type 表示要输入的数据的MIME类型
    17              */
    18             var img1 = document.getElementById('canvas').toDataURL("images/png");
    19             document.getElementById('img1').src = img1;
    20         }
    21 
    22         window.addEventListener("load", function(){
    23             var canvas = document.getElementById('canvas');
    24             if (canvas && canvas.getContext) {
    25                 var ctx = canvas.getContext("2d");
    26                 ctx.fillStyle = "#ffb";
    27                 ctx.beginPath();
    28                 ctx.rect(5, 5, 250, 250);
    29                 ctx.fill();
    30                 ctx.stroke();
    31                 ctx.arc(150, 150, 80, 0, Math.PI * 2 / 4, true);
    32                 ctx.stroke();
    33             }
    34         });
    35     </script>
    36 </body>
    37 </html>

      (二)、坐标变换

        translate(x, y) -- 平移

        scale(x, y) -- 缩放

        rotate(angle) -- 旋转(旋转中心为坐标轴原点),angle 取值为 Math.PI/180*角度

      实例:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>绘制变形图形3 -- 坐标变换</title>
     6 </head>
     7 <body>
     8     <canvas id="canvas" width="360" height="300" style="margin-left: 300px;"></canvas>
     9 
    10     <script>
    11 
    12         window.addEventListener("load", function(){
    13             var ctx = document.getElementById('canvas').getContext("2d");
    14             ctx.translate(130, 120);
    15             for (var i = 1; i < 7; i++) {
    16                 ctx.save();
    17                 ctx.fillStyle = 'rgba(' + (30 * i) + ',' + (255 - 30 * i) + '255, 1)';
    18                 for (var j = 0; j < i * 7; j++) {
    19                     ctx.translate(1, 1);
    20                     ctx.rotate(Math.PI * 2 / (i * 7));
    21                     ctx.beginPath();
    22                     ctx.scale(1.02, 1.02);
    23                     ctx.arc(0, i * 12, 5, 0, Math.PI * 2, false);
    24                     ctx.fill();
    25                 }
    26                 ctx.restore();
    27             }
    28         });
    29         /*
    30          * 坐标变换函数
    31          * translate(x, y) -- x 表示向右移动,y 表示向下移动
    32          * scale(x, y) -- x 表示水平方向的放大倍数,y 表示垂直方向的放大倍数,取 0-1 之间的数则为缩小
    33          * rotate(angle) -- angle 表示旋转的角度,旋转的中心点是坐标轴的原点,旋转是以顺时针方向进行的,
    34          *                     若参数设为负值,则表示逆时针
    35          */
    36     </script>
    37 </body>
    38 </html>

      (三)、矩阵变换

        transform(a, b, c, d, e, f)

        各参数含义:

            a -- 水平缩放

            b -- 水平倾斜
            c -- 垂直倾斜
            d -- 垂直缩放
            e -- 水平移动
            f -- 垂直移动

      实例:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>绘制变形图形4 -- 矩阵变换</title>
     6 </head>
     7 <body>
     8     <canvas id="diagonal" width="300" height="300" style="margin-left: 300px;"></canvas>
     9 
    10     <script>
    11 
    12         window.addEventListener("load", function(){
    13             var canvas = document.getElementById('diagonal');
    14             if (canvas && canvas.getContext) {
    15                 var ctx = canvas.getContext("2d");
    16                 ctx.transform(1, 0, 0, 1, 150, 150);
    17                 ctx.beginPath();
    18                 ctx.fillStyle = "rgba(255, 0, 0, 0.25)";
    19                 rad = 18 * Math.PI / 90;
    20                 for (var i = 0; i < 10; i++) {
    21                     ctx.fillRect(0, 0, 100, 100);
    22                     // 设置旋转效果
    23                     ctx.transform(Math.cos(rad), Math.sin(rad), -Math.sin(rad), Math.cos(rad), 0, 0);
    24                     ctx.closePath();
    25                 }
    26             }
    27         });
    28         /*
    29          * 矩阵变换函数
    30          * transform(a, b, c, d, e, f) 
    31          * 各参数意义
    32          *         a -- 水平缩放
    33          *         b -- 水平倾斜
    34          *         c -- 垂直倾斜
    35          *         d -- 垂直缩放
    36          *         e -- 水平移动
    37          *         f -- 垂直移动
    38          *     rotate(x, y) 使用 transform(a, b, c, d, e, f) 方法替换如下
    39          *         ctx.transform(
    40          *                 Math.cos(angle*Math.PI/180),
    41          *                  Math.sin(angle*Math.PI/180),
    42          *                 -Math.sin(angle*Math.PI/180),
    43          *                 Math.cos(angle*Math.PI/180),
    44          *                 0, 0);
    45          *  或  ctx.transform(
    46          *                 -Math.sin(angle*Math.PI/180),
    47          *                  Math.cos(angle*Math.PI/180),
    48          *                 Math.cos(angle*Math.PI/180),
    49          *                 Math.sin(angle*Math.PI/180),
    50          *                 0, 0);     
    51          * setTransform(a, b, c, d, e, f) -- 重置矩阵            
    52          */
    53     </script>
    54 </body>
    55 </html>
  • 相关阅读:
    Node项目
    Angular模块/服务/MVVM
    Angular介绍1
    Node环境配置及Gulp工具
    Linux及Git介绍
    数据库MySQL
    ReactiveCocoa 监听枚举类型enumerate 或者 NSInteger类型
    ReactiveCocoa 监听布尔(BOOL)类型改变
    python3.7 urlopen请求HTTPS警告'CERTIFICATE_VERIFY_FAILED'解决办法
    Centos yum命令
  • 原文地址:https://www.cnblogs.com/xlb-happymoment/p/6809354.html
Copyright © 2020-2023  润新知