thml5 学习笔记（10）

最新推荐文章于 2025-04-13 10:46:06 发布

原创最新推荐文章于 2025-04-13 10:46:06 发布 · 635 阅读

0 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

15 篇文章

订阅专栏

canvas绘制渐变图形：

<!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,300,400);
            var dx = 150;
            var dy = 150;
            var s = 100;
            context.beginPath();
            context.fillStyle = "rgb(100,255,100)";
            var x = Math.sin(0);
            var y = Math.cos(0);
            var dig = Math.PI/15*11;
            context.moveTo(dx,dy);
            var gr = context.createLinearGradient(0,0,300,0);
            gr.addColorStop(0,"rgba(0,0,255,0.5");
            gr.addColorStop(1,"rgba(255,0,0,0.5");
            for(var i=0; i<30; i++){
                context.fillStyle = gr;
                var x = Math.sin(i*dig);
                var y = Math.cos(i*dig);
                context.bezierCurveTo(dx+x*s, dy+y*s-100,dx+x*s+100, dy+y*s,dx+x*s,dy+y*s);
            }
            context.closePath();
            context.fill();
            context.stroke();
        }
    </script>
</head>
<body onload="draw('canvas')">
<!--bezierCurveTo(cp1x, cp1y, cp2x,cp2y,x,y)
控制点：cp1x,cp1y，第一个控制点的坐标值， cp2x,cp2y，第二个控制点的坐标值：
-->
<canvas id="canvas"  width="300" height="400"></canvas>

</body>
</html>

canvas绘制径向渐变图形；

<!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.createRadialGradient中的六个参数：分别是起始点的圆心位置和半径，结束点的圆心位置和半径
            var gl = context.createRadialGradient(250,250,0,250,250,300);
            gl.addColorStop(0.1, "rgb(255,255,0)");
            gl.addColorStop(0.3, "rgb(255,0,255)");
            gl.addColorStop(1, "rgb(0,255,255)");

            context.fillStyle = gl;
            context.fillRect(0,0,500,500);

        }
    </script>
</head>
<body onload="draw('canvas')">
<!--径向渐变，随着圆形的半径方向向外扩散渐变-->
<canvas id="canvas"  width="500" height="500"></canvas>
</body>
</html>

绘制变形图形：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function draw(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) : x,y 标识原点向左右上下移动的长度
缩放： scale(x,y) : x,y 标识横纵向的缩放大小；
旋转： rotate(deg) : deg:旋转的角度
-->
<canvas id="canvas"  width="500" height="500"></canvas>
</body>
</html>