响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例5-6 绘制几何图形

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>绘制几何图形</title>
</head><body><canvas id="canvas" width="250" height="150" style="border: 1px black solid;"></canvas><script type="text/javascript">var canvas = document.getElementById('canvas');            //获取画布var context = canvas.getContext('2d');                     //准备画笔(获取上下文对象)context.strokeRect(112.5,0,30,30);context.fillRect(0,0,50,50);context.strokeRect(25,25,50,50);context.fillRect(50,50,50,50);context.strokeRect(75,75,50,50);context.fillRect(100,100,50,50);context.strokeRect(125,75,50,50);context.fillRect(150,50,50,50);context.strokeRect(175,25,50,50);context.fillRect(200,0,50,50);</script>
</body>
</html>

运行效果

在这里插入图片描述
在18行代码后编写代码context.clearRect(110,110,30,30);可以达到清除绘制内容的效果。
在这里插入图片描述
在画布中,使用strokeRect()方法和fillRect()方法来绘制矩形边框和填充矩形。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/660719.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

QUIC with CUBIC or BBR

拥塞控制 拥塞控制算法是 TCP/QUIC 协议的一个基础部分&#xff0c;多年来经过一个个版本的迭代&#xff08;如 Tahoe、Reno、Vegas 等&#xff09;&#xff0c;拥塞控制算法得到了持续的提升。由于篇幅有限&#xff0c;本文就目前比较流行的两种拥塞控制算法&#xff08;CUBI…

SVM支持向量机

1.基本概念 支持向量机&#xff08;Support Vector Machine&#xff0c;SVM&#xff09;是一种有监督学习方法&#xff0c;主要用于分类和回归分析。它的基本思想是在特征空间中找到一个超平面&#xff0c;能够将不同类别的样本分开&#xff0c;并且使得离这个超平面最近的样本…

Linux 链接 GitHub 出现 Connection timed out

问题 安装GIT并完成公钥验证&#xff1a;Linux 系统拉取 Github项目 [rootxxx devtools]# ssh -T gitgithub.com ssh: connect to host github.com port 22: Connection timed out解决方案 进入在存放公钥私钥id_rsa.pub文件里&#xff0c;新建/修改config文本 [rootxxx my…

Java 异常处理下篇:11 个异常处理最佳实践

文章目录 前言最佳实践早抛出&#xff0c;晚捕获原则只捕获实际可处理的异常不要忽略捕捉的异常抛出具体的检查性异常正确包装自定义异常中的异常记录或抛出异常&#xff0c;但不要同时执行finally 中永远不要抛出异常或返回值避免使用异常进行流程控制使用模板方法处理重复的 …

算法训练day24回溯算法理论基础77组合

今日学习链接 https://programmercarl.com/%E5%9B%9E%E6%BA%AF%E7%AE%97%E6%B3%95%E7%90%86%E8%AE%BA%E5%9F%BA%E7%A1%80.html#%E7%90%86%E8%AE%BA%E5%9F%BA%E7%A1%80 https://programmercarl.com/0077.%E7%BB%84%E5%90%88.html#%E5%89%AA%E6%9E%9D%E4%BC%98%E5%8C%96 回溯算…

sql注入,布尔盲注和时间盲注,无回显

布尔盲注 通过order by分组可以看到&#xff0c;如果正确会i显示you are in&#xff0c;错误则无任何提示&#xff0c;由此可以判断出&#xff0c;目前只显示对错&#xff0c;此外前端不会显示任何数据 也就是说&#xff0c;目前结果只有两种&#xff0c;在这种只有两种变量的…

Uniapp登录页面获取头像、昵称的最新方法的简单使用

前言 写小程序写到登录页面的时候&#xff0c;发现官方文档中原来的wx.getUserInfo和wx.getUserProfile不太能用了&#xff0c;学习了相对比较新的方法&#xff0c;这种方法的文档链接如下&#xff1a; https://developers.weixin.qq.com/miniprogram/dev/framework/open-abil…

交易策略的开发:关于市场到底能不能预测的哲学思考

文章目录 为什么要判断市场能否被预测三个方面来论述这个问题耗散结构理论什么是耗散结构 为什么要判断市场能否被预测 这个问题已经争论几十年了&#xff0c;不仅在股票市场&#xff0c;期货市场&#xff0c;外汇市场, 甚至整个金融市场。至今没有人给出一个科学的论断。 如果…

上位机是什么?与下位机是什么关系

在工业自动化领域中&#xff0c;上位机是一项关键而引人注目的技术。许多人对上位机的概念感到好奇&#xff0c;想要深入了解其在工业智能中的作用。那么&#xff0c;上位机究竟是什么呢&#xff1f; 首先&#xff0c;上位机是一种用于工业控制系统的软件应用&#xff0c;通常…

配置支持 OpenAPI 的 ASP.NET Core 应用

写在前面 Swagger 是一个规范和完整的框架&#xff0c;用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。 本文记录如何配置基于Swagger 的 ASP.NET Core 应用程序的 OpenAPI 规范。 需要从NuGet 安装 Swashbuckle.AspNetCore 包 代码实现 var builder WebApplicati…

STM32G4单片机

单片机的基本结构 CPU就是中央处理器&#xff0c;是单片机的内核 时钟电路&#xff0c;时钟源是给整个电路提供时序 其他的外设、中断以及存储器都是通过系统总线与CPU进行连接 RAM相当于电脑的内存条&#xff0c;随机存储器&#xff0c;掉电会丢失 ROM相当于电脑的硬盘&am…

vmstat 监控虚拟内存,进程,CPU

文章目录 1. 命令格式&#xff1a;2. 命令功能&#xff1a;3. 命令参数&#xff1a;4. 使用实例&#xff1a;实例1&#xff1a;显示虚拟内存使用情况实例2&#xff1a;显示活跃和非活跃内存实例3&#xff1a;查看系统已经fork了多少次实例4&#xff1a;查看内存使用的详细信息实…

美籍华裔力学和数学家林家翘

林家翘&#xff08;1916年7月7日—2013年1月13日&#xff09;&#xff0c;出生于北京&#xff0c;男&#xff0c;原籍福建福州&#xff0c;力学和数学家&#xff0c;美国艺术与科学院院士、美国国家科学院院士、中国科学院外籍院士&#xff0c;麻省理工学院荣誉退休教授 [1]。 …

初始MySQL

一 SQL的基本概述 基本概述 ▶SQL全称: Structured Query Language&#xff0c;是结构化查询语言&#xff0c;用于访问和处理数据库的标准的计算机语言。SQL语言1974年由Boyce和Chamberlin提出&#xff0c;并首先在IBM公司研制的关系数据库系统SystemR上实现。 ▶美国国家标…

【Linux】Linux基本指令

目录 1.ls指令 2.cd指令 3.touch指令 4.mkdir指令 5.rmdir指令和rm指令 5.1rmdir指令 5.2rm指令 6.man指令 7.cp指令 8.mv指令 9.cat指令 10.more指令 && less指令 10.1more指令 10.2less指令 11.head指令 && tail指令 11.1head指令 11.2tai…

第23课 使用FFmpeg将rtmp流再转推到rtmp服务器

通过上节课的学习&#xff0c;我们已经可以正常播放本地rtmp流及mp4文件&#xff0c;这节课&#xff0c;我们将在上节课的基础上实现一个常用的转推功能&#xff1a;读取rtmp流或mp4文件并转推到rtmp服务器上实现直播转发功能。 一、FFmpeg API 转码推流的一般过程 1.引入ffm…

内存泄漏调试 ---- jemalloc的heap profiling

使用jemalloc时&#xff0c;可以通过profiling机制来发现并定位内存泄漏(memory leak)。本文翻译自原文并增加了一些例子。 1、安装 这里我们编译安装jemalloc.5.10&#xff0c;注意在configure的时候添加了–enable-prof选项&#xff0c;这样才能打开profiling机制。下文中通…

Django的request.session缓存的广发用法

前言&#xff1a; 相信同学们在学习PythonWeb开发的时候和我一样会遇到许多问题&#xff0c;今天我这边举几个例子涉及到session缓存的问题&#xff0c;由于当时并没有接触session缓存的技术内容&#xff0c;所以往往头大&#xff0c;一时间不知带如何解决&#xff0c;老师也会…

2401cmake,学习cmake2

步4:安装与测试 现在开始给项目添加安装规则和支持测试. 安装规则 安装规则非常简单:对MathFunctions,想安装库和头文件,对应用,想安装可执行文件和配置头. 所以在MathFunctions/CMakeLists.txt尾添加: install(TARGETS MathFunctions DESTINATION lib) install(FILES Mat…

服务网格(Service Mesh)流行工具

在这篇博客中&#xff0c;我们将介绍微服务的最佳服务网格工具列表&#xff0c;这些工具提供安全性、金丝雀部署、遥测、负载均衡等。 用于部署和操作微服务的服务网格工具的数量不断增加。在这篇文章中&#xff0c;我们将探讨您应该用来构建自己的服务网格架构的顶级服务网格…