[html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形

时间：2023-03-08 19:18:04

在 HTML5 中，使用 Canvas API 绘制图形的知识，可以对绘制图形进行处理，包含使用 Canvas API 绘制渐变图形，使用 Canvas API 的坐标轴变换处理功能绘制变形图形。其中，左上方的点，为坐标轴原点（0,0）。

1、绘制渐变图形

 <!DOCTYPE html>
 <html>
 <head>
     <title></title>
     <script>
         function draw(id){
             var canvas = document.getElementById(id);
             var context = canvas.getContext("2d");
             var g1 = context.createLinearGradient(0,0,0,300);
             g1.addColorStop(0,"rgb(255,255,0)");
             g1.addColorStop(1,"rgb(0,255,255)");
             context.fillStyle = g1;
             context.fillRect(0,0,500,500);

             var g2 = context.createLinearGradient(0,0,300,0);
             g2.addColorStop(0,"rgba(0,0,255,0.5)");
             g2.addColorStop(1,"rgba(255,0,0,0.5)");
             for(var i=0;i<10;i++){
                 context.beginPath();
                 context.fillStyle = g2;
                 context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
                 context.closePath();
                 context.fill();
             }
         }
     </script>
 </head>
 <body onload="draw('canvas')">
     <!--LinearGradient
         context.createLinearGradient(xstart,ystart,xend,yend)
         addColorStop(offset,color)
         addColorStop(offset,color)
     -->
     <canvas id="canvas" width="500" height="500"></canvas>
 </body>
 </html>

2、绘制径向渐变

 <!DOCTYPE html>
 <html>
 <head>
     <title></title>
     <script>
         function draw(id){
             var canvas = document.getElementById(id);
             if(canvas==null){
                 return false;
             }
             var context = canvas.getContext("2d");
             var g1 = context.createRadialGradient(400,0,0,400,0,400);
             <!--6个参数：起始点的坐标，半径，结束点的坐标，半径-->
             g1.addColorStop(0.1,"rgb(255,255,0)");
             g1.addColorStop(0.3,"rgb(255,0,255)");
             g1.addColorStop(1,"rgb(0,255,255)");
             context.fillStyle = g1;
             context.fillRect(0,0,500,500);
         }
     </script>
 </head>
 <body onload="draw('canvas')">
     <canvas id="canvas" width="500" height="500"></canvas>
 </body>
 </html>

3、绘制变形图形

变形方式：平移、缩放、旋转

 <!DOCTYPE html>
 <html>
 <head>
     <title></title>
     <script>
         function draw(id){
             var canvas = document.getElementById(id);
             if(canvas==null){
                 return false;
             }
             var context = canvas.getContext("2d");
             context.fillStyle = "#eeeeef";
             context.fillRect(0,0,500,500);
             context.translate(200,50);

             context.fillStyle = "rgba(255,0,0,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 onload="draw('canvas')">
     <!--平移：translate(x,y) 缩放：scale(x,y)  旋转：rotate(deg)-->
     <canvas id="canvas" width="500" height="500"></canvas>
 </body>
 </html>

相关文章