HTML5教程篇-绘图：canvas上

最新推荐文章于 2023-09-22 23:16:21 发布

0x001

最新推荐文章于 2023-09-22 23:16:21 发布

阅读量187

点赞数

分类专栏： HTML5 文章标签： canvas HTML5

本文链接：https://blog.csdn.net/bluebloodye/article/details/100860777

版权

这篇HTML5教程介绍了canvas元素，它是用于图形绘制的容器。通过JavaScript，我们可以利用canvas绘制各种图形，如照片集、动画，甚至进行实时视频处理。文章还提供了一个简单的示例来展示canvas的使用。

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

什么是canvas？

Html5<canvas>元素用于图形的绘制。
<canvas>标签只是图形容器，绘制图形需要使用脚本（通常用JavaScript）。
Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。JavaScript代码访问该区域，类似于其他通用的二维Api，通过一套完整的绘图函数来动态生成图形。

它可以用来制作照片集或制作简单的动画，甚至可以进行实时视频处理和渲染。

浏览器支持：

元素	Chrome	ie	Firefox	opera
<canvas>	4.0	9.0	2.0	9.0

简单示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>canvas示例</title>
</head>

<body>
    <!--   创建画布-->
    <canvas id="myCanvas" width="200" height="100" style="border: 1px solid #000000;"></ca