HTML5学习笔记14-Canvas绘制渐变图形与绘制变形图形

最新推荐文章于 2025-05-21 22:29:00 发布

RonnyZhao

最新推荐文章于 2025-05-21 22:29:00 发布

阅读量400

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记文章标签： html5 新手 canvas 图形

本文链接：https://blog.youkuaiyun.com/qq_19919127/article/details/54584485

学习笔记专栏收录该内容

15 篇文章

订阅专栏

1、线性渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>线性渐变</title>
</head>
<body onload="draw()">
    <canvas id="canvas" width="500 " height="500"></canvas>
    <script>
        function draw(){
            var canvas=document.getElementById("canvas");
            if(canvas==null){
                return false;
            }
            var context=canvas.getContext("2d");
            var gl=context.createLinearGradient(0,0,0,300);
            gl.addColorStop(0,"rgb(255,255,0)");
            gl.addColorStop(1,"rgb(0,255,255)");
            context.fillStyle=gl;
            context.fillRect(0,0,500,500);
        }
    </script>
</body>
</html>

2、径向渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
</head>
<body onload="draw()">
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
        function draw(){
            var canvas=document.getElementById("canvas");
            if(canvas==null){
                return false;
            }
            var context=canvas.getContext("2d");
            var g1=context.createRadialGradient(400,0,0,400,0,400);
            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);
            context.fill();
        }
    </script>
</body>
</html>

3、绘制变形图形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变形图形</title>
</head>
<body onload="draw()">
    <!--平移translate(x,y)-->
    <!--缩放scale(x,y)-->
    <!--旋转rotate(deg)-->
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
        function draw(){
            var canvas=document.getElementById("canvas");
            if(canvas==null){
                return false;
            }
            var context=canvas.getContext("2d");
            context.fillStyle="#eeeeee";
            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>
</body>
</html>