html５中canvas元素使用

最新推荐文章于 2024-03-02 13:59:14 发布

火车上遇见

最新推荐文章于 2024-03-02 13:59:14 发布

阅读量1.7k

点赞数

分类专栏： web 文章标签： web

本文链接：https://blog.youkuaiyun.com/WAN_EXE/article/details/77412637

版权

web 专栏收录该内容

9 篇文章

订阅专栏

这篇博客介绍了HTML5中canvas元素的基本使用，包括设置边框、获取二维绘图上下文、绘制矩形的方法如clearRect、fillRect和strokeRect。还讲解了画布的绘制状态配置，如fillStyle、lineJoin和strokeStyle，并介绍了lineJoin的三种类型。最后，文章探讨了如何创建和使用线性和径向渐变来丰富图形效果。

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

html５定义了canvas元素作为原生的flash代替，但是想要代替flash还需要一段时间。canvas元素是一种可供绘图的平面，这里实用JavaScript对它进行配置和操作。

这篇文章的内容来自于《html5 权威指南》

1. 开始实用canvas元素

<!DOCTYPE HTML>

<html>

<head>
    <title>canvas</title>
    <style>
        canvas {
            border: medium double black;
            margin: 4px
        }
    </style>
</head>

<body>
    <canvas width="500" height="200">
        Your browser doesn't support the <code>canvas</code> element
    </canvas>

</body>

</html>

可以将代码另存为.html格式在浏览器中打开查看效果。

这个例子中给canvas元素应用了一个样式绘制边框，这样描述的操作与画布左边之间的关系始终清晰。

canvas元素里的内容会在浏览器不支持此元素时作为备用内容显示。

所以这个例子你将会看到空白的边框，因为该浏览器支持canvas元素。

2. 获取画布的上下文

为了在canvas元素上绘图，需要获取一个上下文对象，这个对象会开发针对特定图形样式的绘图函数。

为了获取二维上下文对象，需要给getContext方法传递参数2d.

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            canvas {border: medium double black; margin: 4px}
        </style>
    </head>
    <body>
        <canvas id="canvas" width="500" height="200">
            Your browser doesn't support the <code>canvas</code> element
        </canvas>
        
        <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            ctx.fillRect(10, 10, 50, 50);
        </script>
    </body>
</html>

3. 绘制矩形

绘制矩形有几个函数

clearRect(x, y, w, h) 清楚指定的矩形

fillRect(x, y, w, h) 绘制一个实心矩形

strokeRect(x, y, w, h) 绘制一个空心矩形

只粘贴script关键代码，其余代码和上述示例相同。

        <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            
            var offset = 10;
            var size = 50;
            var count = 5;
            for (var i = 0; i < count; i++) {
                ctx.fillRect(i * (offset + size) + offset, offset, size, size);
                ctx.strokeRect(i * (offset + size) + offset, (2 * offset) + size, size, size);
            }
                   
        </script>

两排矩形，每排５个。

4. 设置画布绘制状态

绘图操作由绘图状态加以配置，后者是一组属性，指定了从线条宽度到填充色的所有参数。

        <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            
            ctx.lineWidth = 2;
            ctx.strokeRect(10, 10, 50, 50);
            
            ctx.lineWidth = 4;
            ctx.strokeRect(70, 10, 50, 50);
            
            ctx.lineWidth = 6;
            ctx.strokeRect(130, 10, 50, 50);
            
                   
        </script>

有如下属性可以设置

fillStyle lineJoin lineWidth strokeStyle等。

lineJoin有三种　round bevel miter

下面显示

        <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            ctx.lineWidth = 20;
            
            ctx.lineJoin = "round";
            ctx.strokeRect(20, 20, 100, 100);
            
            ctx.lineJoin = "bevel";
            ctx.strokeRect(160, 20, 100, 100);
            
            ctx.lineJoin = "miter";
            ctx.strokeRect(300, 20, 100, 100);
                      
        </script>

使用不同的颜色

     <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            
            var offset = 10;
            var size = 50;
            var count = 5;
            ctx.lineWidth = 3;
         
            var fillColors = ["black", "grey", "lightgrey", "red", "blue"];
            var strokeColors = ["rgb(0,0,0)", "rgb(100,100,100)", "rgb(200, 200, 200)", "rgb(255, 0, 0)", "rgb(0, 0, 255)"];
         
            for (var i = 0; i < count; i++) {
                ctx.fillStyle = fillColors[i];
                ctx.strokeStyle = strokeColors[i]
                ctx.fillRect(i * (offset + size) + offset, offset, size, size);
                ctx.strokeRect(i * (offset + size) + offset, (2 * offset) + size, size, size);
            }
                   
        </script>

5. 使用渐变

有两种渐变

createLinearGradient(x0, y0, x1, y1);

createLinearGradient(x0, y0, r0, x1, y1, r1);

     <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            var grad = ctx.createLinearGradient(0, 0, 500, 140);
            grad.addColorStop(0, "red");
            grad.addColorStop(0.5, "white");
            grad.addColorStop(1, "black");
         
         ctx.fillStyle = grad;
         ctx.fillRect(0, 0, 500, 140);
        </script>
    </body>

createLinearGradient的四个参数的对角线是渐变线的长度。

     <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            var grad = ctx.createRadialGradient(250, 70, 20, 200, 60, 100);
            grad.addColorStop(0, "red");
            grad.addColorStop(0.5, "white");
          grad.addColorStop(1, "black");
         ctx.fillStyle = grad;
         ctx.fillRect(0, 0, 500, 140);
        </script>