如何使用HTML5 canvas绘制一个矩形-H5教程-PHP中文网

首页

web前端

H5教程

如何使用HTML5 canvas绘制一个矩形

不言

Dec 04, 2018 am 10:20 AM

使用HTML5 canvas绘制一个矩形的方法：首先创建相应的HTML示例文件；然后通过Canvas上下文的rect方法实现绘制一个矩形，代码语句如“canvas.getContext('2d');”。

如何使用HTML5 canvas绘制一个矩形

使用HTML5 canvas绘制一个矩形，我们需要用到Canvas上下文的rect（）方法。接下来我们就来看看具体的代码实现。

HTML5 canvas

我们来看一个具体的例子

代码如下

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <script type="text/javascript">
  function draw() {
    var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
    if ( ! canvas || ! canvas.getContext ) {
      return false;
    }
    var cx = 360;
    var cy = 400;
    var radius = 36;
    var context = canvas.getContext(&#39;2d&#39;);
    context.beginPath();
    context.rect(240, 80, 160, 80);
    context.fillStyle = &#39;peachpuff&#39;;
    context.fill();
    context.lineWidth = 2;
    context.strokeStyle = &#39;coral&#39;;
    context.stroke();
  }
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

登录后复制

说明：

由document.getElementById()方法获取Canves对象，Canves对象通过调用getContext()方法，用于获取画布上下文的过程是与在画布上绘制时共同处理的。

调用上下文的beginPath()方法来启动路径。用rect()绘制一个矩形。rect的第一个参数和的第二个参数是矩形左上角的X，Y坐标。第三个参数是绘制矩形的宽度，第四个参数是绘制矩形的高度。

使用fill()方法填充内部并使用stroke方法绘制轮廓线。

运行结果

使用Web浏览器执行创建的HTML文件。将显示如下所示的效果。

HTML5 canvas

上述示例的矩形填充了内部，下面我们来看看没有内部填充的矩形

代码如下

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <style type="text/css">
    <!--
    /*背景色和背景图*/
    .canvas{
      background-color:#FFFFFF;
      background-image: url("img/t.jpg");
    }
    -->
  </style>
  <script type="text/javascript">
  function draw() {
    var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
    if ( ! canvas || ! canvas.getContext ) {
      return false;
    }
    var cx = 360;
    var cy = 400;
    var radius = 36;
    var context = canvas.getContext(&#39;2d&#39;);
    context.beginPath();
    context.rect(240, 80, 160, 80);
    context.lineWidth = 4;
    context.strokeStyle = &#39;coral&#39;;
    context.stroke();
}
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="480" class="canvas"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

登录后复制

说明：在绘制图像时，如果不调用fill（）方法，只执行stroke（）方法，就能绘制内部不填充的矩形。

运行结果

在浏览器上显示如下效果

HTML5 canvas

最后我们来看直接填充内部的矩形绘制

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <script type="text/javascript">
  function draw() {
    var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
    if ( ! canvas || ! canvas.getContext ) {
      return false;
    }
    var cx = 360;
    var cy = 400;
    var radius = 36;
    var context = canvas.getContext(&#39;2d&#39;);
    context.beginPath();
    context.rect(260, 120, 220, 120);
    context.fillStyle = &#39;burlywood&#39;;
    context.fill();
}
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

登录后复制

运行结果如下所示

微信截图_20181204101409.png

以上是如何使用HTML5 canvas绘制一个矩形的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7514

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

h5项目怎么运行 Apr 06, 2025 pm 12:21 PM

运行 H5 项目需要以下步骤：安装 Web 服务器、Node.js、开发工具等必要工具。搭建开发环境，创建项目文件夹、初始化项目、编写代码。启动开发服务器，使用命令行运行命令。在浏览器中预览项目，输入开发服务器 URL。发布项目，优化代码、部署项目、设置 Web 服务器配置。

H5页面制作究竟指什么 Apr 06, 2025 am 07:18 AM

H5 页面制作是指使用 HTML5、CSS3 和 JavaScript 等技术，创建跨平台兼容的网页。其核心在于浏览器解析代码，渲染结构、样式和交互功能。常见技术包括动画效果、响应式设计和数据交互。为避免错误，应使用开发者工具调试；而性能优化和最佳实践则包括图像格式优化、减少请求和代码规范等，以提高加载速度和代码质量。

h5怎么制作点击图标 Apr 06, 2025 pm 12:15 PM

制作 H5 点击图标的步骤包括：在图像编辑软件中准备方形源图像。在 H5 编辑器中添加交互性，设置点击事件。创建覆盖整个图标的热点。设置点击事件的操作，如跳转页面或触发动画。导出 H5 文档为 HTML、CSS 和 JavaScript 文件。将导出的文件部署到网站或其他平台。

H5和小程序与APP的区别 Apr 06, 2025 am 10:42 AM

H5、小程序和APP的主要区别在于：技术架构：H5基于网页技术，小程序和APP为独立应用程序。体验和功能：H5轻便易用，功能受限；小程序轻量级，交互性好；APP功能强大，体验流畅。兼容性：H5跨平台兼容，小程序和APP受平台限制。开发成本：H5开发成本低，小程序中等，APP最高。适用场景：H5适合信息展示，小程序适合轻量化应用，APP适合复杂功能应用。