canvas绘图

最新推荐文章于 2023-05-05 10:24:39 发布

liya_nan

最新推荐文章于 2023-05-05 10:24:39 发布

阅读量261

点赞数

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

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

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了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
      if (canvas.getContext) {
        console.log('你的浏览器支持canvas');
      } else {
        console.log('你的浏览器不支持canvas');
      }
    </script>
  </body>
</html>

二、canvas绘图

1、绘制形状（笑脸）

<script type="text/javascript">
  'use strict';

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

  // 测试浏览器是否支持canvas
  if (canvas.getContext) {
    console.log('你的浏览器支持canvas');

    // 绘制笑脸
    this.painting(canvas);
  } else {
    console.log('你的浏览器不支持canvas');
  }

  function painting(canvas) {
    // 得到一个CanvasRenderingContext2D对象
    let ctx = canvas.getContext('2d');

    // 将(0, 0)位置大小为200*200的矩形变透明
    ctx.clearRect(0, 0, 200, 200);
    ctx.fillStyle = '#dddddd'; // 设置颜色
    ctx.fillRect(10, 10, 130, 130); // 把(10, 10)位置大小为130*130的矩形涂色

    // 利用Path绘制复杂路径
    let path = new Path2D();
    path.arc(75, 75, 50, 0, Math.PI*2, true);
    path.moveTo(110, 75);
    path.arc(75, 75, 35, 0, Math.PI, false);
    path.moveTo(65, 65);
    path.arc(60, 65, 5, 0, Math.PI*2, true);
    path.moveTo(95, 65);
    path.arc(90, 65, 5, 0, Math.PI*2, true);
    ctx.strokeStyle = '#0000ff';
    ctx.stroke(path);
  }
</script>

代码输出结果：