html5 canvas实例绘制变形图形径向渐变

旧城等待， 2022-07-14 07:20 168阅读 0赞

## 浏览器支持 ##

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。

**注释：**Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。

<table style="margin:10px 0px 0px; padding:0px; border:1px solid rgb(170,170,170); border-collapse:collapse; width:709px; color:rgb(0,0,0); font-family:Verdana,Arial,宋体; font-size:12px; background-color:rgb(249,249,249)"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <a href="http://www.w3school.com.cn/tags/canvas_createlineargradient.asp" title="HTML5 canvas createLinearGradient() 方法" style="margin:0px; padding:0px; border:0px; color:rgb(144,11,9); background:transparent" rel="nofollow">createLinearGradient()</a></td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 创建线性渐变（用在画布内容上）</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <a href="http://www.w3school.com.cn/tags/canvas_createpattern.asp" title="HTML5 canvas createPattern() 方法" style="margin:0px; padding:0px; border:0px; color:rgb(144,11,9); background:transparent" rel="nofollow">createPattern()</a></td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 在指定的方向上重复指定的元素</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <a href="http://www.w3school.com.cn/tags/canvas_createradialgradient.asp" title="HTML5 canvas createRadialGradient() 方法" style="margin:0px; padding:0px; border:0px; color:rgb(144,11,9); background:transparent" rel="nofollow">createRadialGradient()</a></td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 创建放射状/环形的渐变（用在画布内容上）</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <a href="http://www.w3school.com.cn/tags/canvas_addcolorstop.asp" title="HTML5 canvas addColorStop() 方法" style="margin:0px; padding:0px; border:0px; color:rgb(144,11,9); background:transparent" rel="nofollow">addColorStop()</a></td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 规定渐变对象中的颜色和停止位置</td> 
  </tr> 
 </tbody> 
</table>

<table style="margin:10px 0px 0px; padding:0px; border:1px solid rgb(170,170,170); border-collapse:collapse; width:709px; color:rgb(0,0,0); font-family:Verdana,Arial,宋体; font-size:12px; background-color:rgb(249,249,249)"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <a href="http://www.w3school.com.cn/tags/canvas_fill.asp" title="HTML5 canvas fill() 方法" style="margin:0px; padding:0px; border:0px; color:rgb(144,11,9); background:transparent" rel="nofollow">fill()</a></td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 填充当前绘图（路径）</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <a href="http://www.w3school.com.cn/tags/canvas_stroke.asp" title="HTML5 canvas stroke() 方法" style="margin:0px; padding:0px; border:0px; color:rgb(144,11,9); background:transparent" rel="nofollow">stroke()</a></td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 绘制已定义的路径</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <a href="http://www.w3school.com.cn/tags/canvas_beginpath.asp" title="HTML5 canvas beginPath() 方法" style="margin:0px; padding:0px; border:0px; color:rgb(144,11,9); background:transparent" rel="nofollow">beginPath()</a></td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 起始一条路径，或重置当前路径</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <a href="http://www.w3school.com.cn/tags/canvas_moveto.asp" title="HTML5 canvas moveTo() 方法" style="margin:0px; padding:0px; border:0px; color:rgb(144,11,9); background:transparent" rel="nofollow">moveTo()</a></td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 把路径移动到画布中的指定点，不创建线条</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <a href="http://www.w3school.com.cn/tags/canvas_closepath.asp" title="HTML5 canvas closePath() 方法" style="margin:0px; padding:0px; border:0px; color:rgb(144,11,9); background:transparent" rel="nofollow">closePath()</a></td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 创建从当前点回到起始点的路径</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <a href="http://www.w3school.com.cn/tags/canvas_lineto.asp" title="HTML5 canvas lineTo() 方法" style="margin:0px; padding:0px; border:0px; color:rgb(144,11,9); background:transparent" rel="nofollow">lineTo()</a></td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 添加一个新点，然后在画布中创建从该点到最后指定点的线条</td> 
  </tr> 
 </tbody> 
</table>

绘制变形图形：

代码：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <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 = "#eeeeef";
                context.fillRect(0,0,500,500);
                context.translate(300,50);
                context.fillStyle="rgba(255,0,0,0.25)";
                for(var i=0; i<500; i++){
                    context.fillRect(0,0,80,30);
                    context.translate(20,20);
                    context.scale(0.99,0.99);
                    context.rotate(Math.PI/20);
    
                }
            }
        </script>
    </head>
    <body οnlοad="draw('canvas')">
        <canvas id="canvas" width="500" height="500"></canvas>
    </body>
    </html>

效果：

![20161201205440013][]

绘制径向渐变图形：

代码：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <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 = "#eeeeef";
                context.fillRect(0,0,500,500);
                var g1 = context.createRadialGradient(400,50,50,400,50,400);
                g1.addColorStop(0,"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 οnlοad="draw('canvas')">
        <canvas id="canvas" width="500" height="500"></canvas>
    </body>
    </html>

效果：

![20161201205543169][]

[20161201205440013]: /images/20220714/b967d2fd5dc74ef79eb73945582ccb95.png
[20161201205543169]: /images/20220714/66c8aa69a6e64c879b3680004454e640.png