canvas clear 指定属性的元素_HTML5 如何创建Canvas画布

最新推荐文章于 2023-06-08 15:50:16 发布

自娱自乐的傲娇ho

最新推荐文章于 2023-06-08 15:50:16 发布

阅读量151

点赞数

文章标签： canvas clear 指定属性的元素

本文链接：https://blog.csdn.net/weixin_42518480/article/details/112101649

版权

本节我们来学习如何创建 Canvas 画布。 <canvas> 标签是 HTML5 中新增的标签，通过使用 JavaScript 中的脚本来绘制图形。在页面上放置一个 canvas 元素，就相当于在页面上放置了一块画布，canvas 元素拥有多种绘制矩形、圆形、字符、路径以及添加图像的方法。

但是我们并不是使用鼠标在画布中画画的哟，其实 <canvas> 标签本身没有绘制图形的能力，它只是一个图形容器，要想在这个容器中绘制图形，则必须使用 JavaScript 脚本来完成。

创建画布

<canvas> 是一个双标签，我们可以通过标签中的 width 和 height 属性来定义画布的大小，这样就会在页面中创建一个隐藏的画布，如果要实际看到这个画布，可任意通过 style 属性为画布添加边框。

示例：

例如定义一个宽高都为 200px ，边框为 2px、实线、黑色的画布：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5学习(9xkd.com)</title>
    </head>
    <body>
       <canvas width="200px" height="200px" style="border: 2px solid #000;"></canvas>
    </body>
</html>

在浏览器中的效果如下：

如果我们没有给<canvas>设置宽和高，则会默认width为300px，height为150px。CSS属性也可以用来设置宽和高，但是如果宽高属性和初始比例不一致，会出现扭曲。所以建议不要使用CSS中的属性来设置<canvas>的宽高。

绘制图像

上面我们讲了 <canvas> 本身是没有绘制图像的能力，如果要绘制图像必须通过 JavaScript 中的脚本来实现。

通常我们需要在 <canvas> 标签中指定一个 id 属性，方便我们能快速的通过标签来找到 canvas 元素。

示例：

例如在创建好的画布中绘制一个蓝色矩形：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5学习(9xkd.com)</title>
    </head>
    <body>
       <canvas id="mycanvas" width="200px" height="200px" style="border: 2px solid #000;"></canvas>
       <script>
           var can = document.getElementById("mycanvas");
           var ctx = can.getContext("2d");
           ctx.fillStyle = "#99CCFF";
           ctx.fillRect(50, 50, 100, 100);
       </script>
    </body>
</html>

在 HTML 代码中引用 JavaScript 代码有两种方法，一种是直接在 <script> 标签中书写，还有一种是单独创建一个 .js 文件，然后在 HTML 页面中通过 <script> 标签引入 .js 文件，例如：

<script src="./index.js"></script>

上述代码在浏览器中的演示效果如下：

上述代码中 getElementById() 方法用于返回对拥有指定 ID 的第一个对象的引用，所带参数为指定元素的 id 属性值。

而 getContext() 方法返回一个用于在画布上绘图的环境，参数指定了想要在画布上绘制的类型，当前唯一的合法值为 2d，表示二维绘图。

总结

使用 <canvas> 标签来创建画布其实很简单，比较复杂的是如何在画布中绘制图形，这涉及到很多属性和方法，我们下一节来详细讲解。

想了解更多可以查看链接：https://www.9xkd.com/

自娱自乐的傲娇ho

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas clear 指定属性的元素_HTML5 如何创建Canvas画布

本节我们来学习如何创建 Canvas 画布。 <canvas> 标签是 HTML5 中新增的标签，通过使用 JavaScript 中的脚本来绘制图形。在页面上放置一个 canvas 元素，就相当于在页面上放置了一块画布，canvas 元素拥有多种绘制矩形、圆形、字符、路径以及添加图像的方法。但是我们并不是使用鼠标在画布中画画的哟，其实 <canvas> 标签本身没有绘制图形...
复制链接

扫一扫