HTML5 新特征之Canvas基础_html5canvas特点-CSDN博客

本文链接：https://blog.csdn.net/UserPython/article/details/104309926

这篇博客介绍了HTML5的Canvas标签，详细讲解了如何使用Canvas进行直线、矩形、圆弧、文字及渐变色的绘制，提供了丰富的绘制方法和属性，如strokeStyle、fillStyle、arc和createGradient等，帮助开发者掌握Canvas图形API。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas标签

了解canvas标签
绘制直线
绘制矩形
绘制圆弧
绘制文字
绘制渐变色
- 线性渐变
- 放射渐变
绘制阴影

了解canvas标签

HTML5的canvas标签提供了一套强大的图形API，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。让开发者能够制作从文字处理到电子游戏的各类应用程序。

绘制直线

1、在HTML5文档中，添加canvas标签，并且设置宽高（画布）和ID
2、在canvas标签中添加提示语句，让不支持canvas的浏览器能够显示友好的提示语句
3、添加script标签
4、获取画布、设置绘图环境
（1）、指定线宽：lineWidth = 数值
（2）、指定颜色：strokeStyle = 颜色值（只适用于轮廓，线段等，填充色用：fillStyle = 颜色值）
5、设定起点：moveTo(x坐标，y坐标)
6、设定新点：lineTo(x坐标，y坐标)
7、绘制：stroke()
8、beginPath()：用来创建新的路泾
9、closePath()：从当前点回到起始点来封闭路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas绘制直线</title>
    <style type="text/css">
        canvas{background: #a9a9a9;}
    </style>
</head>
<body>    
	<canvas id="mycanvas" width="500" height="300">您的浏览器暂不支持HTML5的canvas标签</canvas>
    <script type="text/javascript">
        var mycanvas = document.getElementById("mycanvas"); //定义变量，并且获取画布
        var mycontext = mycanvas.getContext("2d"); //设置绘图环境为2d
        mycontext.lineWidth = 10; //设置画笔宽度
        mycontext.strokeStyle = "#0000ff"; //设置画笔颜色
        mycontext.moveTo(50, 50); //设置起点
        mycontext.lineTo(200, 50);  //设置一个新点
        mycontext.lineTo(200, 200);
        // mycontext.lineTo(50, 50);
        mycontext.closePath(); //回到起始点  
        mycontext.stroke(); //开始绘制
    </script>
</body>
</html>

绘制矩形

1、rect(x, y, w, h)：创建一个矩形
2、strokeRect(x, y, w, h)：绘制矩形（无填充）
3、fillRect(x, y, w, h)：绘制“被填充”的矩形
4、stroke()：绘制已定义的路径
5、fill()：绘制一个实心的（带填充的图形）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas绘制直线</title>
    <style type="text/css">
        canvas{background: #a9a9a9;}
    </style>
</head>
<body>
    <canvas id="mycanvas" width="800" height="600">您的浏览器暂不支持HTML5的canvas标签</canvas>
    <script type="text/javascript">
        var mycanvas = document.getElementById("mycanvas"); //定义变量，并且获取画布
        var mycontext = mycanvas.getContext("2d"); //设置绘图环境为2d
        mycontext.lineWidth = 10; //设置画笔宽度
        // mycontext.strokeStyle = "#0000ff"; //设置画笔颜色
        // mycontext.moveTo(50, 50); //设置起点
        // mycontext.lineTo(200, 50);  //设置一个新点
        // mycontext.lineTo(200, 200);
        // // mycontext.lineTo(50, 50);
        // mycontext.closePath(); //回到起始点  
        // mycontext.stroke(); //开始绘制

        // mycontext.beginPath(); //绘制新的路径
        mycontext.strokeStyle = "#00ff00";
        mycontext.rect(300, 50, 150, 150);
        mycontext.stroke();

        mycontext.beginPath();
        mycontext.strokeStyle = "blue";
        mycontext.strokeRect(500, 50, 150, 150);

        mycontext.beginPath();
        mycontext.rect(50, 50, 150, 150);
        mycontext.fillStyle = "red";
        mycontext.fill();

        mycontext.beginPath();
        mycontext.fillRect(50, 300, 150, 150);
    </script>
</body>
</html>

绘制圆弧

arc(x, y, r, 开始角度，结束角度， true逆时针/false顺时针)：创建圆弧、曲线（用于创建圆形或部分圆）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制圆弧</title>
    <style type="text/css">
        canvas{background: #a9a9a9;}
    </style>
</head>
<body>
    <canvas id="mycanvas" width="800" height="600">
        您的浏览器不支持HTML5的canvas标签
    </canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas"); //获取画布
        var context = canvas.getContext("2d");// 设置画布为2d
        context.lineWidth = 6; //设置线宽
        context.strokeStyle = "green"; //设置线条颜色
        context.fillStyle = "red"; //设置填充颜色
        context.arc(100, 100, 30, 0, Math.PI*2);
        context.stroke();

        context.beginPath();
        context.arc(200, 100, 30, 0, Math.PI*2);
        context.fill();

        context.beginPath();
        context.arc(300, 100, 30, 0, Math.PI*2);
        context.fill();
        context.stroke();

        context.beginPath();
        context.arc(400, 100, 30, 0, Math.PI/2, true);       
        context.closePath();
        context.stroke();
    </script>
</body>
</html>

绘制文字

1、strokeTest(“文字”， x，y， maxWidth)：绘制（描边）空心文字
2、fillText(“文字”，x，y，maxWidth)：绘制实心文字
3、font(大小字体。。。)：字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字</title>
    <style type="text/css">
        canvas{background: #a9a9a9;}
    </style>
</head>
<body>
    <canvas id="mycanvas" width="800" height="600">
        您的浏览器暂不支持HTML5的canvas标签
    </canvas>
    <script>
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        context.lineWidth = 2;
        context.strokeStyle = "red";
        context.fillStyle = "yellow";
        context.font = "50px 雅黑"
        context.strokeText("文字", 400, 200);  
        context.fillText("文字", 400, 400); 
        </script>
</body>
</html>

绘制渐变色

线性渐变

1、createLinearGradient(x1, y1, x2, y2)：创建线性渐变，颜色渐变的起始坐标和终点坐标
2、addColorStop(位置， “颜色值”)：0表示起点（插入点），1表示终点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变</title>
    <style type="text/css">
        canvas{background:#a9a9a9;}
    </style>
</head>
<body>
    <canvas id="mycanvas" width="800" height="600">
        您的浏览器不支持HTML5的canvas标签
    </canvas>
    <script>
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        var jianBian = context.createLinearGradient(50, 50, 750, 50);
        // var jianBian = context.createLinearGradient(50, 50, 50, 550);
        jianBian.addColorStop(0, "#000000");
        jianBian.addColorStop(0.5, "#ff0000");        
        jianBian.addColorStop(1, "#ffffff");

        context.fillStyle = jianBian;
        context.fillRect(50, 50, 700, 500);
    </script>
</body>
</html>

放射渐变

1、createRadialGradient(x1, y1, r1, x2, y2, r2)：创建放射性渐变或径向渐变
2、addColorStop(位置， “颜色值”)：0表示起点（插入点），1表示终点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变</title>
    <style type="text/css">
        canvas{background:#a9a9a9;}
    </style>
</head>
<body>
    <canvas id="mycanvas" width="800" height="600">
        您的浏览器不支持HTML5的canvas标签
    </canvas>
    <script>
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");

        //放射渐变
        var fangShe = context.createRadialGradient(400, 300, 1, 400, 300, 200);
        fangShe.addColorStop(0, "#000000");
        fangShe.addColorStop(0.5, "#00ff00");
        fangShe.addColorStop(1, "#ffffff");

        context.fillStyle = fangShe;
        context.arc(400, 300, 200, 0, Math.PI*2);
        context.fill();
    </script>
</body>
</html>

绘制阴影

shadowOffsetX：设置阴影的水平偏移距离，数值越大越往右偏移
shadowOffsetY：设置阴影的垂直偏移距离，数值越大越往下偏移
shadowBlur：设置阴影的模糊系数，数值越大越模糊
shadowColor：设置阴影的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影</title>
    <style type="text/css">
        canvas{background: #ffff00;}
    </style>
</head>
<body>
    <canvas id="mycanvas" width="800" height="600">
        您的浏览器暂不支持HTML5的canvas标签
    </canvas>
    <script>
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        context.shadowOffsetX = 30;
        context.shadowOffsetY = 30;
        context.shadowBlur = 5;
        context.shadowColor = "#a9a9a9";
        context.fillStyle = "red";
        context.font = "60px 黑体";
        context.fillText("绘制阴影--Shadow", 200, 200);

        context.beginPath();
        context.fillRect(400, 300, 150, 150);
    </script>
</body>
</html>