网页中的画布 canvas

伯思

已于 2022-07-15 18:17:24 修改

阅读量1.8k

点赞数 1

文章标签：前端 html 学习

于 2022-07-15 17:13:59 首次发布

本文链接：https://blog.csdn.net/hbl020305/article/details/125801765

版权

前言

在网页中，用户通过img标签可以插入需要的图片，但这些图片往往需要预先准备好。在HTML5中，提供了全新的画布功能，让用户可以随时创造丰富多彩、赏心悦目的图案。

一、何为画布

在网页中，我们把用于绘制图形的特殊区域称为“画布”，网页设计师可以在该区域义绘制自定的图形样式，canvas画布默认情况下在网页上是一块大小300*150的空白的区域。

二、画布如何使用？

画布操作基本分为八步：

1.获取画布（创建画布对象）2.创建画布上下文对象3.告诉程序绘画路径开始4.绘制图形的起始点（坐标）5.绘制图形的连接点6.设置图形的样式7.描边8.填充

<html>
    <body>
        <canvas id="cas" width="500px" height="500px">
			您的浏览器版本过低，不支持画布，请更新浏览器。
		</canvas>
        <script type="text/javascript">
	        //1.获取画布
	        var cas = document.getElementById(