Canvas3——绘制渐变图形与绘制变形图形

来源：互联网发布：linux cp 查看进度编辑：程序博客网时间：2024/05/18 06:22

1、Canvas绘制渐变图形

（1）绘制线性渐变

createLinearGradient()

**CanvasRenderingContext2D**.createLinearGradient()方法创建一个沿参数坐标指定的直线的渐变。该方法返回一个线性 CanvasGradient对象。

CanvasGradient _ctx_.createLinearGradient(x0, y0, x1, y1);

参数

x0: 起点的 x 轴坐标。
y0: 起点的 y 轴坐标。
x1: 终点的 x 轴坐标。
y1: 终点的 y 轴坐标。

addColorStop()

**CanvasGradient**.addColorStop() 方法添加一个由偏移值和颜色值指定的断点到渐变。如果偏移值不在0到``1之间，将抛出``INDEX_SIZE_ERR错误，如果颜色值不能被解析为有效的CSS颜色值 <color>，将抛出SYNTAX_ERR错误。

语法

void _gradient_.addColorStop(offset, color);

参数

offset: 0到1之间的值，超出范围将抛出INDEX_SIZE_ERR错误
color: CSS颜色值 <color>。如果颜色值不能被解析为有效的CSS颜色值<color>，将抛出SYNTAX_ERR错误。

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas3</title>
    <script>
        function draw(id){
            var canvas = document.getElementById(id);
            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')">
    <canvas id="canvas" width="500px" height="500px"></canvas>
</body>
</html>

（2）绘制径向渐变

**CanvasRenderingContext2D**.createRadialGradient() 是 Canvas 2D API 根据参数确定两个圆的坐标，绘制放射性渐变的方法。这个方法返回CanvasGradient。

语法

CanvasGradient _ctx_.createRadialGradient(x0, y0, r0, x1, y1, r1);

参数

x0: 开始圆形的 x 轴坐标。
y0: 开始圆形的 y 轴坐标。
r0: 开始圆形的半径。
x1: 结束圆形的 x 轴坐标。
y1: 结束圆形的 y 轴坐标。
r1: 结束圆形的半径。

返回值

CanvasGradient: 由两个指定的圆初始化的放射性 CanvasGradient 对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas4</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);
            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="500px" height="500px"></canvas>
</body>
</html>

(3)绘制变形图形

`translate(x,y)` 移动

`scale(x,y)` 缩放

`rotate(deg)` 旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas5</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')">
    <canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

1 0