【html5每日练习】canvas画矩形的3个函数

canvas高级动画001:文字瀑布流 我们经常会看到一些科技场景,01数字不断交替下移或者扩散闪现等。这里是一个示例,通过setInterval的方式,来不断的绘制文字,形成瀑布流的状态。 阅读详情

前端时间,听周围的朋友和同学说html5不好学,去论坛还有各大网站看,在国内也没有真正地开始发展。也见到了专业好多哥们儿(不是计算机专业)学了一半就放弃了,我觉得也情有可原吧,终归编程也是需要耐得住寂寞的行业,去学一门语言,你要没有毅力去克服初学这道难关,你确实只能处于入门这个阶段,我不算过来人(相对于在这个行业混了十几年的甚至几十年的人来说),记得有一个所谓的过来人跟我说,编程是一个体力活,这点我同意,在初学的阶段的确是一个体力活,他还说,咱们中国人和国外内些人真的没法比的,他们身体和咱们不一样。。。当时我表示很无语,介于他是我学长的面子上,我就不当面反驳他了,因为中国有太多他这样想法的,所以中国IT行业(不管在软件还是硬件方面)发展的那么慢,或许最近几年貌似有蓬勃发展的趋势吧。我很多同学不要说写代码了,就是看代码,都会头痛,我觉得他当时何必选这个专业呢?虽然我的专业我觉得算自动化类的吧,或许更偏重于硬件类或者电子类,但现在这个年代哪有纯粹的硬件呢?大一时候学的c语言,除了当时对printf和scanf觉得好奇,就再也没拿起VC++过,学了半年的c,分不清VC和C的大有人在,或许大一倾向于理论吧(不觉得他们理论学的很强),介于我这种上课基本不去的人来说,考试也都过了,那些为了点名而去的人怎么就没过呢?我也迷茫了将近一年,因为我更喜欢软件业,或者说更喜欢写程序,所以在团队里(学校几个比较好的哥们组了一个团队)就承担起编程的责任,写单片机程序,8位控制器很快我们就没了兴趣,做几个项目也力不从心了,都想追求点高端的东西,但最后还是怀着“不想做就更应该做好的”想法把项目圆满完成了,这一年是进步最快的一年,也是自己确定方向的一年。说了一大堆没用的,只是今天在实验室看见几个哥们读matlab程序的时候头疼的样子而有的感慨(虽然我也不是很喜欢matlab的代码吧)。

看代码(代码和以上感慨无关):

<html lang="en-US">
<canvas id=myCanvas width=200px height=200px></canvas>

<script>
	var myCanvas = document.getElementById("myCanvas");
	var context = myCanvas.getContext("2d");
	
	context.strokeStyle = "blue";
	context.fillStyle = "red";
	context.strokeRect(0,0,200,200);
	context.fillRect(50,50,100,100);
	context.clearRect(70,70,60,60);
	context.strokeRect(80,80,40,40);
</script>
</html>

代码很简单,主要是为了说明画矩形的3个函数,strokeRect() fillRect() clearRect(),效果图如下,看到图就会很明了了。内部的参数分别代表起点横坐标、起点纵坐标、矩形宽度、矩形高度。




HTML5每日练习:Canvas标签的应用 - 绘制线性渐变图形 在浏览器中打开HTML文件,你将看到一个宽度为400像素,高度为200像素的Canvas元素,并且在其中绘制了一段从左上角到右上角渐变的矩形。我们可以使用context对象的createLinearGradient()方法创建一个线性渐变对象,并使用addColorStop()方法添加渐变的颜色和位置。接下来,我们可以使用context对象的fillStyle属性设置渐变的样式,然后使用fillRect()方法绘制一个填充了渐变颜色的矩形。0表示渐变的起始位置,1表示渐变的结束位置。 阅读详情

相关推荐

HTML5每日练习之Canvas标签的应用-矩阵变换

Canvas标签是HTML5中用于绘制图形的一个强大工具。通过使用Canvas标签,我们可以实现各种有趣的图形效果和动画。本文将介绍如何使用Canvas标签进行矩阵变换,以实现图形的平移、缩放、旋转和倾斜等操作。在开始之前,我们需要在HTML文档中添加一个Canvas标签,以提供一个绘图的区域。可以使用以下代码添加一个Canvas标签:

PmtxPhp的博客 91

前端基础_绘制带边框矩形

绘制带边框矩形 今天给小伙伴分享,如何在canvas画布中绘制一个矩形。在本例中调用了脚本文件中的draw函数进行图形描绘。该函数放置在body属性中,使用“onload="draw('canvas');"”语句,调用脚本文件中的draw函数进行图像描画。在本例中draw函数的功能是把canvas画布的背景用浅蓝色涂满,然后画出一个绿色正方形,边框为红色。

m0_72882572的博客 1060

抖音罗盘时钟javascripts版本源码

抖音罗盘时钟javascript版本源码 代码仅供参考 有兴趣的同学可以一起研究

HTML5画布(canvas)绘制图形

canvas 元素用于在网页上绘制图形 canvas 是 HTML5 新增的元素,可用于通过使用JavaScript中的脚本来绘制图形。 默认情况下它在网页上是一块空白区域,默认大小300*150 注意:canvas画布默认背景色为透明色,可以自行定义背景色...

m0_61843988的博客 5014

【硬件相关】IB网与以太网核心技术解析及高性能网络部署指南

本文深入解析了IB网与以太网的核心技术差异,包括协议栈、流量控制机制及硬件架构,并提供了高性能网络部署的实战指南。通过对比测试和调优案例,展示了IB网在低延迟和高负载下的优势,以及混合组网中的创新应用,助力超算集群和高效网络部署。

weixin_29311017的博客 99

深入解析Android14应用安装权限:从声明到授予的完整适配指南

本文深入解析Android14应用安装权限的适配方法,重点介绍了从权限声明到授予的完整流程。与Android13相比,Android14在权限管理机制上进行了重要调整,特别是通过AppOpsManager实现权限的对象化封装。文章详细讲解了权限声明的基础配置、Framework层适配方案、运行时权限授予方法以及常见问题排查指南,帮助开发者高效完成Android14权限适配。

o9p0q1的博客 694

html页面画一个矩形,使用HTML5 canvas绘制一个矩形的方法

使用HTML5 canvas绘制一个矩形的方法发布时间:2020-08-29 11:23:12来源:亿速云阅读:102作者:小新这篇文章将为大家详细讲解有关使用HTML5 canvas绘制一个矩形的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。使用HTML5 canvas绘制一个矩形,我们需要用到Canvas上下文的rect()方法。我们来看一个具体的例子代...

weixin_29475313的博客 2153

详解modbus TCP通讯,并利用其实现欧姆龙PLC和西门子PLC的通讯

大家好,之前需要更新的MQTT通讯【2】因为硬件不足还不能发布出来,但最近在项目中涉及到西门子和欧姆龙之间的modbus TCP通讯,想到modbus TCP通讯是个非常常见并广泛使用的通讯协议,今天就结合最近做的测试给大家好好讲解一下,先提示一下,这边只给大家讲解如何实现,至于报文是什么,如何用socket来编写功能块或dll这边不会讲解,这块我会根据私信的小伙伴数量来考虑要不要出一篇如何用ST语言来编写modbus TCP功能块的博客。

dy186187的博客 1万+

HTML5 Canvas中绘制矩形

绘制矩形上一节,我们使用lineTo()方法绘制一个封闭的矩形。其实,canvas的API提供了rect()方法可以绘制矩形。rect()方法是路径方法,它会把指定的矩形添加到当前路径的子路径中。它只添加路径,绘制图形还是由stroke()或fill()方法完成。除了rect()方法之外,Canvas 的API还提供了三个直接处理矩形的方法:fillRect(x, y, width, height...

歪脖先生的博客 4251

ARM一致性总线CMN600AE

是基于Mesh拓扑结构,对外支持AMBA CHI/ACE-LITE等接口,内部改用路由结构转发数据,并提供硬件一致性和系统缓存,还支持多芯片互联。CMN600在T16FFC上可以做到2Ghz,另外AE版本增加了车规芯片的安全功能,总线内部采用EDC检查,接口采用的奇校验。CMN-600AE具有以下特点:该网络符合功能安全标准,例如ISO 26262(汽车电子领域的功能安全标准)或IEC 61508(工业自动化领域的功能安全标准)等。

weixin_50518899的博客 3501

linux redis7 完整的集群搭建过程

一。安装: 1.1 说明: Redis官方只提供了源码,并没有提供经过编译之后的安装包。 因此,安装Redis,要先编译、后安装。(即源码安装方式) 注意:需要联网安装 1.2 安装编译的工具: yum install gcc gcc-c++ -y 1.3 下载tar包,上传到linux服务器,解压配置环境变量 1.4 cd +解压的目录下:编译 make 注意:如果编译失败,请重新进行解压编译,...

m0_38028438的博客 719

HTML5教程-用Canvas标签绘制矩形

HTML5教程-用Canvas标签绘制矩形 本文教大家如何在canvas上绘制矩形,当你学会后,可以再举一反三的做一下练习。 注:本节内容,需要您有JS基础才能更好地理解。 绘制矩形的步骤: 1、在页面上创建一个canvas标签 首先在页面上建立一个canvas标签,因为我们所有的操作都要在canvas元素上完成。 2、使用js取得canvas元素 由

yixuan_1的专栏 1154

38、四旋翼无人机的机械建模、控制与仿真及小型无人机高度的最优鲁棒无模型控制

本文探讨了四旋翼无人机的机械建模、控制与仿真方法,采用基于PID控制器的分层控制策略实现稳定飞行与路径跟踪,并开发了结合CAD模型与MATLAB环境的飞行模拟器。同时,针对小型无人机高度控制问题,提出了一种基于粒子群优化(PSO)的最优鲁棒无模型控制(PSO-MFC)方法,有效解决了参数整定难题,实现了零稳态误差跟踪和强抗干扰能力。两种方法在仿真中均表现出良好性能,为无人机控制系统的设计与优化提供了理论与实践基础。

l6m7n8的博客 100

【html5每日练习】绘制两个重叠矩形(带滤镜效果)

代码很简单,稍微会点canvas的应该就可以看懂 var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); context.fillStyle = "red"; context.fillRect(50,50,100,100); context.fil

boia 3824

解决Qt字体问题:QFontDatabase: Cannot find font directory xx/lib/fonts

1.直接在main函数里设置app的整体字体库.这个错误提示比较明显的就是字体库缺失。

有问题或资源连接有缺失的可以私信公众号新潮看世界获取 3043

uniapp [安卓苹果App端] - errMsg“: “request:fail abort statusCode:-1 不支持的URL(-1002)Uniapp真机运行APP网络请求报错失败排查

uniapp真机运行APP,网络请求报错errMsg“: “request:fail abort statusCode:-1 不支持的URL(-1002),uni.request网路请求报错,uniApp解决请求接口报错,uniapp app端打包上线后请求报错,真机运行测试请求失败,uniapp安卓app请求报错,uniapp苹果ios平台网络请求报错,uniapp真机预览请求失败怎么办,不是跨域问题,在H5中请求可以正常发送和接收,但在真机APP上请求报错,Hbuilder真机运行app网络请求报错,全

🏆 前端领域优质创作者 3087

HTML5教程实例-用Canvas制作线性渐变图形

HTML5教程实例-用Canvas制作线性渐变图形 到目前为止,我们使用canvas绘制图形的基本知识已经介绍完毕,从本节开始,我们将介绍其他比较高级的绘制知识之一 - 线性渐变,首先我们来回顾一下《HTML5教程-用Canvas标签绘制矩形》中指定填充的颜色fillStyle。绘制线性渐变时,我们需要使用到一个新的对象-LinearGradient对象,使用图形上下文对象的create

yixuan_1的专栏 925

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

HTML每日学习代码:绘制图形

第一个控制点 (cpX1,cpY1) 控制的是曲线离起点的偏离程度和方向,而第二个控制点 (cpX2,cpY2) 控制的是曲线离终点的偏离程度和方向。createLinearGradient(0, 0, 0, c.height) 创建的线性渐变对象会从画布的左上角 (0, 0) 开始,延伸到画布的左下角 (0, c.height)。在这个方法中,offset 参数表示渐变的位置,取值范围为 0 到 1,代表了当前位置相对于渐变起点和终点之间的距离比例。r0 是起点圆的半径,r1 是终点圆的半径。

Zb_Xl的博客 3365

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

HTML5教程实例-用Canvas标签绘制圆形

HTML5教程实例-用Canvas标签绘制圆形 如果想要绘制一个圆形是不是还跟矩形一样呢? 绘制圆形的步骤: 1、开始创建路径 首先使用图形上下文对象的beginPath()方法。 2、创建圆形路径 创建圆形路径时,需要使用圆形上下文对象的arc()方法。 arc(x, y, radius, startAngle, endAngle, anticloc

yixuan_1的专栏 1223

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

JS 雪花飘落效果 玩转 canvas 绘图 码农的每日积累 -匠心之作

HTML5 元素 canvas 用于图形的绘制, canvas 标签只是图形容器,通常使用 JavaScript 来完成绘制,如绘制路径,盒、圆、字符以及添加图像。 getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

代码小疯子 1211

路径图形html5 Canvas画图2:画线条 -java教程

空话就不多说了,开始。。。     如果你还不道知Canvas是什么,可以看看上一篇.     在学画画的时候,线条是最基本的了,而线条的接连可以成组任何图形。在Canvas中也是如此。     在开始之前我们先拿出画布和画笔: var cvs = document.getElementById('cvs'); //画布 var ctx = cvs.getContext('2d

403

HTML5教程实例-Canvas标签-坐标变换与路径结合使用

HTML5教程实例-Canvas标签-坐标变换与路径结合使用 到目前为止,我们已经学会了很多Canvas的绘制方法,如果我们要绘制如下图的图形怎么办呢? 我们需要对矩形变形,使用坐标变换就足够了。但是对使用路径绘制出来的图形进行变幻的时候,那么要考虑的事情就 多了。因为使用坐标变换之后,已经创建好的路径就不可用了。必须要重新创建路径,重新创建路径后,坐标变换方法又失效了。

yixuan_1的专栏 1026

HTML5/CSS3速成教程

HTML5/CSS3越来越普及,用的越来越多,我们到底如何学习并掌握他们?现在前端开发网(W3Cfuns)就带领大家一起快速的掌握它。 HTML5速成教程[未完待续,更新中] 第一章:HTML5表单篇 HTML5速成教程 之 Form新属性的使用 HTML5速成教程 之 input新增加的URL类型与email类型应用 HTML5速成教程 之 input新增加的六种时间类型应

Tizian的专栏 2677

canvas 内容溢出出现滚动条_JS 雪花飘落效果 玩转 canvas 绘图 码农的每日积累 -匠心之作...

在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天、每周,都会留下一些脚印,就是这些创作的内容,有一种执着,就是不知为什么,如果你迷茫,不妨来瞅瞅码农的轨迹。优美的音乐节奏带你浏览这个效果的编码过程坚持每一天,是每个有理想青年的追求周末也需要学习 Flutter 一个气泡动画背景的登录页面-倾心之作 如果你迷茫 不妨来瞅瞅 年轻人每日都...

weixin_30769833的博客 1035

html5设置清单,HTML5的代码清单

HTML5 有很多令人心动的特性和新功能,这里罗列了一些HTML5新特性的示例代码。包含使用 video 标签播放动画、使用 audio 标签播放音频、使用 Canvas 标签绘制图形、取得当前的位置、将大量的数据保存在客户端、form 的强化一、HTML5新特性强化了Web网页的表现性能,增加了本地数据库等 Web 应用的功能,以及图像操作等。HTML5 在图像上引入了 Canvas 标签,通过...

weixin_39920415的博客 200

上下文绘图HTML5 Canvas: 获取二维上下文,开始绘图

本篇文章是一篇关于上下文绘图的帖子 原文: http://www.lifelaf.com/blog/?p=346 每日一道理 这浓浓的母爱使我深深地认识到:即使你是一只矫健的雄鹰,也永远飞不出母爱的长空;即使你是一条扬帆行驶的快船,也永远驶不出母爱的长河!在人生的路上不管我们已走过多远,还要走多远,我们都要经过母亲精心营造的那座桥! 本文翻译自Steve...

weixin_30802273的博客 132
上一篇: 【html5每日练习】绘制两个重叠矩形(带滤镜效果)
下一篇: 【Html5每日练习】canvas笑脸
boia
博客等级 码龄15年 56粉丝 39原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值