canvas绘图

最新推荐文章于 2024-07-04 19:49:15 发布

liya_nan

最新推荐文章于 2024-07-04 19:49:15 发布

阅读量246

点赞数

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

本文链接：https://blog.csdn.net/liya_nan/article/details/81481365

版权

本文介绍了HTML5的Canvas元素，用于在网页上进行JavaScript绘图。内容包括如何测试浏览器是否支持Canvas，以及如何利用Canvas绘制基本形状，如笑脸。

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

Canvas是HTML5新增的组建，它就像一块幕布，可以用JavaScript在上面绘制各种图标、动画等。

一、测试浏览器是否支持canvas

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>canvas绘图</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
  </head>
  <body>
    <canvas id="test-canvas" width="300" height="200">
      <p>您的浏览器不支持Canvas</p>
    </canvas>

    <script type="text/javascript">

      let canvas = document.getElementById('test-canvas');

      // 测试浏览器是否支持canvas