HTML每日学习代码：绘制图形

最新推荐文章于 2024-08-23 10:53:05 发布

是我知白哒

最新推荐文章于 2024-08-23 10:53:05 发布

阅读量2.5k

点赞数 3

分类专栏： HTML5 文章标签： html 学习前端

本文链接：https://blog.csdn.net/Zb_Xl/article/details/131630886

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1 矩形、圆形和直线

1.1 矩形

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>绘制矩形</title>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid blue">
</canvas>
<script type="text/JavaScript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="rgb(0,0,225)";
    cxt.fillRect(10,20,100,100);
</script>
</body>
</html>

1.1.1 代码说明：

<canvas id="myCanvas" width="500" height="500" style="border:1px solid blue"></canvas>

上面代码中，id表示画布对象名称。style表示画布样式，border是设置边框，1px表示边框是1像素，solid表示边框为实线，后面的blue表示边框颜色蓝色。

 cxt.fillStyle="rgb(0,0,225)";
 cxt.fillRect(10,20,100,100);

fillStyle设置所画图形的填充颜色，rgb(0, 0, 225)表示纯蓝色。fillRect设置所画矩阵的位置和尺寸，此例中矩形位于坐标 (10, 20)，矩阵宽度为 100 像素，高度也为 100 像素。

1.1.2 补充知识：

绘图时的边框样式和填充颜色类型：https://blog.csdn.net/Zb_Xl/article/details/131631273

1.2绘制圆形

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>绘制圆形</title>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid blue">
</canvas>
<script type="text/JavaScript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF69B4";
    cxt.beginPath();
    cxt.arc(70,18,15,0,Math.PI*2,true);
    cxt.closePath();
    cxt.fill();
</script>
</body>
</html>

1.2.1 代码说明：


    cxt.beginPath();
    cxt.closePath();
    cxt.fill();

beginPath():开始绘制路径，closePath():结束路径绘制，fill():填充。

context.arc(x, y, radius, startAngle, endAngle, anticlockwise);

x 和 y：圆心的坐标。radius：圆的半径。startAngle 和 endAngle：起始角度和结束角度，以弧度表示（0 度为水平向右方向，逆时针增加角度）。anticlockwise：可选参数，布尔值，指定是否按逆时针方向绘制圆弧，默认为顺时针方向。

1.3 绘制直线

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>绘制直线</title>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid blue">
</canvas>
<script type="text/JavaScript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.beginPath();
    cxt.strokeStyle="#FF69B4";
    cxt.moveTo(50,50);
    cxt.lineTo(150,50);
    cxt.lineTo(300,100);
    cxt.lineWidth=6;
    cxt.stroke();
    cxt.closePath();
</script>
</body>
</html>

1.3.1 代码说明：

moveTo()：设置绘图起始坐标。lineTo():从当前起点会指挥直线、圆弧以及曲线到目标位置。lineWidth()：设置线条粗细。stroke()：指定线条颜色。closePath() 方法用于结束当前子路径，并将绘图点移动到子路径的起始点，从而形成闭合的路径。

1.4 绘制贝济埃曲线

<!DOCTYPE html>
<html lang="en">
<head>
    <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="#eeeeff";
    context.fillRect(0,0,400,300);
    var n=0;
    var dx=150;
    var dy=150;
    var s=100;
    context.beginPath();
    context.globalCompositeOperation='and';
    context.fillStyle='rgb(100,255,100)';
    context.strokeStyle='rgb(0,0,100)';
    var x=Math.sin(0);
    var y=Math.cos(0);
    var dig=Math.PI/15*11;
    for(var i=0;i<30;i++)
    {
    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');">
<h1>绘制元素</h1>
<canvas id="canvas" width="800" height="600"></canvas>
</body>
</html>

1.4.1 代码说明：

bezierCurveTo(cpX1,cpY1,cpX2,cpY2,x,y)

参数分别表示第一个控制点的坐标、第二个控制点的坐标和曲线结束的坐标和曲线的结束坐标。

第一个控制点 (cpX1,cpY1) 控制的是曲线离起点的偏离程度和方向，而第二个控制点 (cpX2,cpY2) 控制的是曲线离终点的偏离程度和方向。如果控制点位于起点和终点的连线上，那么曲线将会经过这个控制点；而如果控制点不在连线上，那么曲线会被吸引或推离该控制点的位置，形成弯曲的效果。

2 渐变图形

2.1 绘制线性渐变

<!DOCTYPE html>
<html>
<head>
    <title>线性渐变</title>
    <meta charset="UTF-8">
</head>
<body>
<h1>绘制线性渐变</h1>
<canvas id="canvas" width="400" height="300" style="border:1px solid red"></canvas>
<script type="text/JavaScript">
    var c=document.getElementById("canvas");
    var cxt=c.getContext("2d");
    var gradient=cxt.createLinearGradient(0,0,0,c.height);
    gradient.addColorStop(0,'cornflowerblue');
    gradient.addColorStop(1,'pink');
    cxt.fillStyle=gradient;
    cxt.fillRect(0,0,400,300);
</script>
</body>
</html>

2.1.1 代码说明：

createLinearGradient(x0, y0, x1, y1)

参数 x0 和 y0 表示渐变的起点坐标，而 x1 和 y1 则表示渐变的终点坐标。 (x0, y0) 是线性渐变的起点， (x1, y1) 是线性渐变的终点。

createLinearGradient(0, 0, 0, c.height) 创建的线性渐变对象会从画布的左上角 (0, 0) 开始，延伸到画布的左下角 (0, c.height)。即渐变会沿着垂直方向从顶部到底部进行。

addColorStop(offset, color)

在这个方法中，offset 参数表示渐变的位置，取值范围为 0 到 1，代表了当前位置相对于渐变起点和终点之间的距离比例。color 参数则表示该位置处的颜色。

addColorStop(0, 'cornflowerblue') ，它指定了渐变的起点位置（即偏移为 0 的位置），颜色为 'cornflowerblue'，“矢车菊蓝”的颜色。

通过多次调用 addColorStop() 方法，我们可以为线性渐变对象定义多个颜色和位置。这些颜色和位置会在起点和终点之间进行插值，形成平滑的渐变效果。

2.2 绘制径向渐变

<!DOCTYPE html>
<html>
<head>
    <title>径向渐变</title>
    <meta charset="UTF-8">
</head>
<body>
<h1>绘制径向渐变</h1>
<canvas id="canvas" width="400" height="300" style="border:1px solid red"></canvas>
<script type="text/JavaScript">
    var c=document.getElementById("canvas");
    var cxt=c.getContext("2d");
    var gradient=cxt.createRadialGradient(canvas.width/2,canvas.height/2,0,canvas.width/2,canvas.height/2,150);
    gradient.addColorStop(0,'cornflowerblue');
    gradient.addColorStop(1,'pink');
    cxt.fillStyle=gradient;
    cxt.fillRect(0,0,400,300);
</script>
</body>
</html>

2.2.1 代码说明：

createRadialGradient(x0, y0, r0, x1, y1, r1)

(x0, y0) 是径向渐变的起点中心， (x1, y1) 是径向渐变的终点中心。r0 是起点圆的半径，r1 是终点圆的半径。

3 图形的变形

3.1 变换原点坐标

<!DOCTYPE html>
<html>
<head>
    <title>变换原点坐标</title>
    <meta charset="UTF-8">
<script>
   function draw(id)
   {
   var canvas=document.getElementById(id);
   if(canvas==null)
    return false;
    var context=canvas.getContext('2d');
    context.fillStyle="#eeeeff";
    context.fillRect(0,0,400,300);
    context.translate(200,50);
    context.fillStyle='rgba(0, 191, 255, 0.25)';
    for(var i=0;i<50;i++){
        context.translate(25,25);
        context.fillRect(0,0,100,50);
        }
    }
</script>
</head>
<body onload="draw('canvas');">
<h4>变换原点坐标</h4>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

3.1.1 代码说明：

translate(25, 25)

表示将画布在水平方向上向右平移 25 个单位，在垂直方向上向下平移 25 个单位。

for(var i=0;i<50;i++){
        context.translate(25,25);
        context.fillRect(0,0,100,50);
        }
    }

这是一个循环，循环变量 i 从 0 到 49，总共执行了 50 次循环。在每次循环中，执行以下操作：

使用 translate 方法将当前坐标系在 x 轴方向上平移 25 像素，在 y 轴方向上平移 25 像素。每次循环都会相对于上一次的平移位置进行平移。
使用 fillRect 方法绘制一个矩形，其左上角的坐标为 (0, 0)，宽度为 100 像素，高度为 50 像素。
因此，每次循环都会在画布上绘制一个矩形，且矩形之间的位置相对于前一个矩形平移了 (25, 25) 的距离。由于循环执行了 50 次，所以最终会绘制出一个图案，包含了 50 个矩形。每个矩形都比前一个矩形在 x 和 y 方向上向右下方平移了 (25, 25) 的距离。

3.2 图形缩放

<!DOCTYPE html>
<html>
<head>
    <title>绘制图形缩放</title>
    <meta charset="UTF-8">
<script>
   function draw(id)
   {
   var canvas=document.getElementById(id);
   if(canvas==null)
    return false;
    var context=canvas.getContext('2d');
    context.fillStyle="#eeeeff";
    context.fillRect(0,0,400,300);
    context.translate(200,50);
    context.fillStyle='rgba(0, 191, 255, 0.25)';
    for(var i=0;i<50;i++){
    context.scale(3,0.5);
    context.fillRect(0,0,100,50);
    }
    }
</script>
</head>
<body onload="draw('canvas');">
<h4>图形缩放</h4>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

3.2.1 代码说明：

scale(3,0.5)

scale()方法使绘制的图形在水平方向上放大3倍，在垂直方向上缩小为原来的一半。

3.3 图形旋转

<!DOCTYPE html>
<html>
<head>
    <title>绘制旋转图形</title>
    <meta charset="UTF-8">
<script>
   function draw(id)
   {
   var canvas=document.getElementById(id);
   if(canvas==null)
    return false;
    var context=canvas.getContext('2d');
    context.fillStyle="#eeeeff";
    context.fillRect(0,0,400,300);
    context.translate(200,150);
    context.fillStyle='rgba(0, 191, 255, 0.25)';
    for(var i=0;i<50;i++){
        context.rotate(Math.PI/10);
        context.fillRect(0,0,100,50);
        }
    }
</script>
</head>
<body onload="draw('canvas');">
<h4>图形旋转</h4>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

3.3.1 代码说明：

rgba(0, 191, 255, 0.25)

注意这里是rgba()，他最后一个参数是透明度，可以显示被覆盖部分。

rotate(Math.PI/10)

rotate 方法用于对当前的绘图转换矩阵进行旋转变换。它接受一个参数，表示旋转的角度。

Math.PI 是 JavaScript 中的常量，表示圆周率 π 的近似值。Math.PI/10 表示将圆周分割成 10 份，每份的角度为 π/10。

因此，rotate(Math.PI/10) 的意思是将绘图上下文按照 π/10 的角度进行旋转。

3.4 绘制阴影

<!DOCTYPE html>
<html>
<head>
    <title>绘制旋转图形带阴影效果</title>
    <meta charset="UTF-8">
<script>
   function draw(id)
   {
   var canvas=document.getElementById(id);
   if(canvas==null)
    return false;
    var context=canvas.getContext('2d');
    context.fillStyle="#eeeeff";
    context.fillRect(0,0,400,300);
    context.translate(200,150);
    context.fillStyle='rgba(0, 191, 255, 0.25)';
    for(var i=0;i<50;i++){
        context.rotate(Math.PI/10);
        context.fillRect(0,0,100,50);
        }
    }
</script>
</head>
<body onload="draw('canvas');">
<h4>图形旋转带阴影</h4>
<canvas id="canvas" width="400" height="300" style="border:1px solid #ff00000"></canvas>
<script type="text/JavaScript">
    var elem=document.getElementById("canvas");
    if(elem&&elem.getContext){
        var context=elem.getContext("2d");
        //阴影x(shadowOffsetX)和y(shadowOffsetY)的偏移量，单位是像素
        context.shadowOffsetX=15;
        context.shadowOffsetY=15;
        //hadowBlur:设置阴影模糊程度，值越大，阴影越模糊
        context.hadowBlur=10;
        //shadowColor:阴影颜色
        context.shadowColor='rgba(255, 0, 0, 0.25)'
        }
</script>
</body>
</html>