HTML5 如何创建Canvas画布

最新推荐文章于 2024-06-17 09:59:43 发布

书和咖啡

最新推荐文章于 2024-06-17 09:59:43 发布

阅读量1.7k

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/ivenqin/article/details/106938401

版权

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

摘要由CSDN通过智能技术生成

本节我们来学习如何创建 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

最低0.47元/天解锁文章

书和咖啡

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML5 如何创建Canvas画布

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

扫一扫