html5<canvas>标签绘制矩形，线条，圆

最新推荐文章于 2024-03-06 17:48:00 发布
原创 最新推荐文章于 2024-03-06 17:48:00 发布 · 1.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了HTML5的主要改进和新增特性，包括简化文档声明及字符编码方式，新增的&lt;canvas&gt;元素用于绘图，以及&lt;header&gt;、&lt;footer&gt;等标签的应用，还详细讲解了如何利用&lt;canvas&gt;实现矩形、线条、圆形的绘制，并演示了音频视频标签的使用。

Html5有一种趋势，替代现在的web技术

Html5是html+css+javascript的综合

html5代码做了简化：

1，文档声明：<!DOCTYPE html>

2，字符编码：<meta charset='utf-8'/>

3，默认css作为样式表，默认javascrip作为脚本语言，所以定义的时候，不需要声明了

 <script>

 

一、html5新增的标签

(1)<canvas>标签

(2)增加<header><footer> 标签

(3)增加音频和视频 <video>  <audio>标签

（1）

绘制矩形：

<canvas id="myCanvas" width='500px' height='300px' style="border:1px solid #9C0">你好</canvas>

<script>

<!--得到画布-->

var canvas=document.getElementById('myCanvas');

//得到画笔,获得二维画布

var ctx=canvas.getContext('2d');

//绘制颜色

ctx.fillStyle='#C06';//不给颜色默认是黑色

//开始填充矩形

ctx.fillRect(30,30,200,60);

</script>

绘制线条：

<canvas id="myCanvas" width='500px' height='300px' style="border:1px solid #9C0">你好</canvas>

<script>

<!--得到画布-->

var canvas=document.getElementById('myCanvas');

//得到画笔,获得二维画布

var ctx=canvas.getContext('2d');

//绘制颜色

ctx.fillStyle='#C06';

//划线

ctx.moveTo(10,10);//开始划线的地方

ctx.lineTo(150,50);//结束的地方

ctx.lineTo(200,30);//以上次结束的地方为开始,这次结束的点

ctx.stroke();

</script>

绘制圆形：

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";  

cxt.beginPath();               //开始绘制

cxt.arc(70,18,15,0,Math.PI*2,true);  //确定中心点和半径

cxt.closePath();

cxt.fill();          

园心：70,18，半径：15

起始角：弧的圆形的三点钟位置是 0 度

结束角：Math.PI*2

顺时针还是逆时针：False = 顺时针，true = 逆时针。

使用 stroke() 或 fill() 方法在画布上绘制实际的弧

绘制渐变：

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

// grd作为fillStyle的值

var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,"#FF0000");

grd.addColorStop(1,"#00FF00");

cxt.fillStyle=grd;

cxt.fillRect(0,0,175,50);

1，渐变开始的坐标：0,0

2，渐变结束的坐标：175,50

  3，addColorStop()  的值在 0-1之间

0,渐变开始与结束之间的位置，#FF0000结束位置显示的颜色

(2)、header footer标签

<header>网页的头部</header>

<footer>网页的尾部</footer>

头部和尾部有利于SEO，搜索引擎一看到header和footer部分，

不会重复抓取

（3）音频视频标签 <video>  <audio>

目前 video标签只支持 ogg，mp4格式的视频，

controls  是否显示控制台

autoplay  就绪后马上播放，自动播放

loop      循环播放

preload   页面加载时预加载(不和autoplay一起使用)

例:<video src="Surface.mp4" width="500px" height="300px" controls="controls" autoplay="on" loop="yes" />

whjwhja6
关注
HTML中的 `＜canvas＞` 元素
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-26 969
canvas>元素为 Web 开发者提供了一个强大的工具箱，可用于创建动态和交互式的图形界面。通过本文的介绍，您应该已经了解了的基本概念和使用方法，并学习了一些实际开发中的技巧。无论是简单的图形绘制还是复杂的数据可视化，都能胜任。希望您在未来的项目中能够灵活运用，创造出更多令人惊叹的作品。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7。
HTML5中的＜canvas＞标签如何使用？
最新发布
破损的天堂鸟博客
01-26 1113
HTML5中的<canvas>标签是一个强大的工具，用于在网页上创建动态图像、视觉效果、2D和3D图形，以及动画和交互式应用程序。以下是使用<canvas>
HTML5 Canvas 学习笔记（canvas绘制线条、矩形、多边形、圆、自定义图像）
zy54605178的博客
01-13 573
HTML5 Canvas 学习笔记（canvas绘制线条、矩形、多边形、圆、自定义图像）：https://www.cnblogs.com/charmingyj/p/5527223.html HTML 5 Canvas 参考手册：https://www.w3school.com.cn/tags/html_ref_canvas.asp ...
【Html5】canvas绘制圆形
boia
04-11 4945
上一篇中写了滤镜的效果，这一次把滤镜效果写在圆上，和上一篇原理是一样的 先截个图： 代码如下 var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); context.fillStyle = "#e4e4e4";
html矩形画圆,html5 canvas绘制矩形和圆形的实例代码
weixin_42298279的博客
06-05 401
JavaScript Code复制内容到剪贴板绘制矩形:绘制圆形：//绘制矩形function draw(){var canvas=document.getElementById('ca'); //获取canvas元素if (canvas==null)return false;var context=canvas.getContext('2d'); //取得上下文context.fillStyle...
html字体线条标签,HTML标签 | Highcharts 使用教程
weixin_39563722的博客
06-05 381
HTMl标签(Lables)指的是可以放置在图表中任意位置的文字标签，由于最终的文字标签是以 SVG 渲染的，所以标签的内容只支持少量的 HTML 标签，包括：、、、、、，其中 可以通过 style 属性来设定样式，但是有效的样式仅限和文字相关的属性。HTML 标签的基本构造是：labels: {style: { // 标签全局样式color: "#...
学习HTML标签
y2162484776的博客
03-06 757
特点：点标签、img标签需要展示对应的效果，需借助标签的属性进行设置。代码格式： ……——属性值：“目标图片的路径”（最好写绝对路径）……作用：可以让文字加粗、下划线、倾斜、删除线等效果。代码格式：4、标签名与属性之间必须以空格隔开。1、标签的属性写在开始标签内部。2、标签上可以同时存在多个属性。3、属性之间以空格隔开。特点：单标签、在页面上显示一条水平线。特点：文字都加粗、都变大、独占一行。特点：段落之间存在间隙、独占一行。
要使用HTML5的`＜canvas＞`元素来绘制线性渐变的矩形，你可以按照以下步骤操作
BLOG域名:programb.blog.youkuaiyun.com
06-27 540
这些方法组合起来，允许开发者精细地控制图形的细节和复杂性。例如，你可以使用它们构建动态的矢量图形、游戏元素或数据可视化图表。来测量文字尺寸，然后调整布局。对于复杂的文本溢出控制，可能需要结合CSS样式和更复杂的逻辑。如果你需要在非标准情况下获取或处理上下文，还可以考虑使用。如果你需要动态适应多行文本或自定义溢出元素，可以使用。这样可以在处理可能缺失的上下文时提供更好的错误处理。对象，可以用来执行2D绘图操作。
基于HTML5的新增标签canvas，借canvas的特性来，进行绘制图形.zip
02-14
在HTML5的`<canvas>`标签中，开发者可以通过JavaScript来控制画布上的每一个像素，实现丰富的图形绘制，包括但不限于线条、形状、图像处理、动画等。`<canvas>`元素本身只是一个空白的画布，真正的魔法在于通过...
js+html5实现canvas绘制简单矩形的方法
10-24
Canvas的API非常丰富，支持包括绘制矩形、圆形、线条、文本以及添加图像等各种操作。 在这个文档中，我们将学习如何使用JavaScript结合HTML5的Canvas来绘制一个简单的矩形。这个过程不仅包括了Canvas元素的使用，还...
HTML入门-----常用标签之水平线标签
m0_73887605的博客
07-17 242
水平线标签<hr/>
html布局线条,使用命名线布局
weixin_36070568的博客
06-09 379
如果要给网格中所有的线都定义唯一的名字，就要用普通写法，即在定义轨道时把名字写在方括号里，而不能使用 repeat 语法。使用 repeat 语法的结果是得到有相同名字的多条线，不过这也是有用的。下面的例子创建了一个有 12 个等宽列的网格，在定义列轨道尺寸为 1fr 之前，也定义了网格线名字 [col-start]，也就是说最终会创建一个 12 列的网格，每个 1fr 宽的列左侧的线都被命名为 ...
HTML常用标签
叶子与海的博客
09-14 2423
1.文本标签 标题标签 h1~h6逐渐变小 段落标签 段落标签会自动换行，并且段落与段落之间有一定的间距。 换行标签 自闭合标签，br是break（换行）的缩写。 文本标签 平时用更有语义性的标签(加粗的）
HTML的基本标签
qq_58167492的博客
04-04 1885
文章末尾有代码和效果可查看。 基本标签： 段落标签<p></p> 标题标签：<h1></h1>、<h2></h2>、<h3></h3>、<h4></h4>、<h5></h5>、<h6></h6> 换行标签<br/> 分割线标签<hr/> 布局标签<div></div> span标签
bootstrap知识点
weixin_63098055的博客
06-28 673
1.全屏操作：HTML5提供requestFullscreen()方法，允许用户自定义网页上任一元素的全屏显示，提供了关闭全屏显示exitFullscreen() cancelFullscreen()方法。xs是maxsmall简写：超小， sm是small简写：小， md是medium简写：中等， lg是large简写：大；12.input-group-prepend 在输入框前面添加文本信息 input-group-text:在输入框的位置插入文本内容。13.按钮：btn-block:全屏按钮。
HTML-新手入门
m0_63028823的博客
09-19 1324
HTML系统结构 （1） B/S架构：Browser / Server （浏览器/服务器的交互形式） Browser支持哪些语言：HTML、CSS、 JavaScript B/S架构的优缺点： 优点：升级方便，只升级服务器端代码即可。维护成本低 缺点：速度慢、体验不好、界面不炫酷 常见系统：京东、百度、天猫 （2） C/S架构：Client / Server （客户端/服务器端的交互形式） C/S架构的优缺点： 优点：速度快，体验好，界面炫酷 缺点：升级麻烦，维护成本较高 常见系统：QQ、微信、支付宝
HTML入门初学篇（一）
我脾气呢的博客
09-27 1633
html初学
HTML5 Canvas 画：线、圆、矩形、渐变
CatEatApple的专栏
05-29 1809
HTML5画：线、圆、矩形、渐变示例一：矩形&lt;!DOCTYPE html&gt;&lt;head&gt; &lt;meta charset=utf-8&gt; &lt;title&gt;HTML5画线、圆、矩形&lt;/title&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.mi...
自定义标签
yxpjx的专栏
11-06 443
1.标签(Tag): 标签是一种XML元素，通过标签可以使JSP网页变得简洁并且易于维护，还可以方便地实现同一个JSP文件支持多种语言版本。由于标签是XML元素，所以它的名称和属性都是大小写敏感的 2.标签库(Tag library): 由一系列功能相似、逻辑上互相联系的标签构成的集合称为标签库。 3.标签库描述文件(Tag Library Descriptor): 标签库描述文件是一个XML文件
HTML5 Canvas API：完美绘制矩形的技巧
"这篇教程详细介绍了如何利用HTML5的Canvas API来绘制矩形，并解决在设置粗线宽时出现的图形闭合问题。" 在HTML5中，Canvas API是一个强大的工具，允许开发者在网页上进行动态图形绘制。Canvas元素通过JavaScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值