菜鸟教程之html5学习,Canvas画布、渐变,数学公式、符号的书写
html5元素及功能: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者,等
HTML5新元素
<canvas> | 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API | |
<audio> | 定义音频内容 | 多媒体 |
<video> | 定义视频(video 或者 movie) | 多媒体 |
<source> | 定义多媒体资源 <video> 和 <audio> | 多媒体 |
<embed> | 定义嵌入的内容,比如插件。 | 多媒体 |
<track> | 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。 | 多媒体 |
<datalist> | 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。 | 表单 |
<keygen> | 规定用于表单的密钥对生成器字段。 | 表单 |
<output> | 定义不同类型的输出,比如脚本的输出。 | 表单 |
<article> | 定义页面独立的内容区域。 | |
<aside> | 定义页面的侧边栏内容。 | |
<bdi> | 允许您设置一段文本,使其脱离其父元素的文本方向设置。 | |
<command> | 定义命令按钮,比如单选按钮、复选框或按钮 | |
<details> | 用于描述文档或文档某个部分的细节 | |
<dialog> | 定义对话框,比如提示框 | |
<summary> | 标签包含 details 元素的标题 | |
<figure> | 规定独立的流内容(图像、图表、照片、代码等等)。 | |
<figcaption> | 定义 <figure> 元素的标题 | |
<footer> | 定义 section 或 document 的页脚。 | |
<header> | 定义了文档的头部区域 | |
<mark> | 定义带有记号的文本。 | |
<meter> | 定义度量衡。仅用于已知最大和最小值的度量。 | |
<nav> | 定义导航链接的部分。 | |
<progress> | 定义任何类型的任务的进度。 | |
<ruby> | 定义 ruby 注释(中文注音或字符)。 | |
<rt> | 定义字符(中文注音或字符)的解释或发音。 | |
<rp> | 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。 | |
<section> | 定义文档中的节(section、区段)。 | |
<time> | 定义日期或时间。 | |
<wbr> | 规定在文本中的何处适合添加换行符 |
<canvas>
参考手册:www.runoob.com/tags/ref-canvas.html
1.在画布上画出一个矩形
<body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas><script>var c=document.getElementById("myCanvas");//首先,找到 <canvas> 元素:
var ctx=c.getContext("2d");//然后,创建 context 对象:
//getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
//设置fillStyle属性可以是CSS颜色,渐变,或图案。fillStyle 默认设置是#000000(黑色)。fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。左上(0,0)右下(150,75)</script></body>
效果图:在200*100的画布创建了一个长宽为150*75的红色矩形
2.在画布上画出一条直线
<body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas><script>var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);//开始坐标
ctx.lineTo(50,25);//结束坐标
ctx.moveTo(60,30);//开始坐标
ctx.lineTo(80,40);//结束坐标
ctx.moveTo(100,50);//开始坐标
ctx.lineTo(200,100);//结束坐标
ctx.stroke();//两点间画线</script></body>
效果图:开始结束
3.在画布上画出圆或圆弧
<body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas><script>var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,0.75*Math.PI);
//圆心(95,50);半径40;从0度开始,绕360度(2*Math.PI),成为圆
ctx.stroke();//画图形
//arc(x,y,r,start,stop)
//x:圆心在x轴上的坐标
// y:圆心在y轴上的坐标
// r:半径长度
// start:起始角度,以弧度表示,圆心平行的右端为0度
// stop:结束角度,以弧度表示
//注意:Math.PI表示180°,画圆的方向是顺时针</script> </body>
效果图:0.75*Math.PI
4.在画布上写出字:
<body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
浏览器不支持canvas标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello Amilsc",10,50);//实心字母
//ctx.strokeText("Hello Amilsc",10,50);//空心字
</script>
</body>
效果图:
5.线性渐变
<script>var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");// Create gradient创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);//(x,y,x1,y1)
grd.addColorStop(0,"blue");//addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1.
grd.addColorStop(1,"white");// Fill with gradient填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,5,180,90);//渐变矩形在画布中的区域及大小</script>
效果图:
6.渐变圆
<script>var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,75,50,100);//(x,y,r, x1,y1,r1)
grd.addColorStop(0,"white");
grd.addColorStop(1,"red");// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
效果图:白色开始,红色结束;
7.将图像放在画布上
<body><p>Image to use:</p>
<img id="scream" src="img/meetYou.jpg" alt="The Scream"><p>Canvas:</p>
<canvas id="myCanvas" width="550" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas><script>var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");img.onload = function() {ctx.drawImage(img,10,10);//图片开始的位置(10,10)
}
</script></body>
效果图:
Canvas与SVG:
Canvas | SVG |
---|---|
|
|
Canvas方法等详见参考手册:www.runoob.com/tags/ref-canvas.html
end~
HTML5 MathML: www.runoob.com/html/html5-mathml.html
HTML5 可以在文档中使用 MathML 元素,对应的标签是 <math>...</math> 。
MathML 是数学标记语言,是一种基于XML(标准通用标记语言的子集)的标准,用来在互联网上书写数学符号和公式的置标语言。
菜鸟教程之html5学习,Canvas画布、渐变,数学公式、符号的书写相关推荐
- HTML5之canvas画布教你绘画小黄人
HTML5之canvas画布教你绘画小黄人 Canvas画布:顾名思义绘画的基础,也是一幅画作的根.同样,我们学习技术也需要一步步往上走立好自己根,才能更好的成长.有一些东西总不能完美,但我们都有追求 ...
- 用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- 使用HTML5的Canvas画布来剪裁用户头像
日期:2013-5-23 来源:GBin1.com 本文来自极客标签社区用户webgeek的一个在线HTML5web开发小技巧,帮助你使用html5的画布功能来切割用户上传的大头照. 在线调试 例如 ...
- 教你如何利用canvas画布绘制哆啦A梦
教你如何利用canvas画布绘制哆啦A梦 最近一直在练习使用canvas画布标签,今天教大家如何使用canvas画布绘制哆啦A梦.如图: HTML代码: <canvas id="my_ ...
- python pymysql cursors_老雷python基础教程之pymysql学习及DB类的实现
老雷python教程之pymysql学习及DB类的实现 CREATE TABLE `sky_guest` ( `id` int(11) NOT NULL AUTO_INCREMENT, `title` ...
- 菜鸟教程之C语言基础(上)
菜鸟教程之C语言基础(上) 一.前言: 前几天,在看另一个教程视频,总感觉太啰嗦,讲的东西不符合我想要的. 这里,通过菜鸟教程,看一遍文档,打一遍笔记,想通过这样学一下C语言的基础. 感谢菜鸟教程. ...
- 【HTML5】Canvas画布
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- HTML5中canvas画布属性,html5 Canvas之画布合成的属性总结
首先解释一下合成的含义,合成是指如何精细控制画布上面的对象的透明度和分层效果.其中控制Canvas画布合成的操作的两个属性分别是:globalAlpha和globalCompositeOperatio ...
- Html5学习------canvas绘制径向渐变图形
<!DOCTYPE HTML> <html><head><meta http-equiv="Content-Type" content=& ...
最新文章
- 十天学会php之第五天
- iOS UIButton(按钮)
- Linux主机WordPress伪静态设置方法
- Dao层系列-4-Hibernate Spring Annotation
- lisp求面与面的差集_AcGeVector3d是点阵的集合,通过等分点的差集得到。 新的点可以通过点与点阵相差得......
- Swift之extension的使用
- 【转】ABP源码分析八:Logger集成
- java console输出_将java console的输出写入文件
- C#多线程的用法2-线程的生命周期
- 基于axis2的webservice和android简单的本地数据交互(下)
- Java 8 异步 API、循环、日期,用好提高生产力!
- python语言的基本数据类型_python语言基本数据类型-深浅拷贝
- python从入门到精通——完整教程
- mnist数据集无法下载
- RS232与RS485协议原理及其应用
- Mate30安装谷歌全家桶(20200215,成功)
- 最全可编辑世界地图中国地图素材
- 打造一款属于自己的短视频webApp(Vite搭建React Hooks+Recoil+Antd)
- 【IOS开发进阶系列】动画专题
- 吉哥系列故事——恨7不成妻(多返回值的数位DP)
热门文章
- laravel从入门到精通之 php excel设置单元格边框只显示竖条
- 概率论笔记5.1大数定律
- mysql替换首字母_MySQL中使用replace、regexp进行正则表达式替换的用法分析
- c语言调试过程中的错误,C语言调试过程中duplicate symbol错误分析
- 2019年数学建模C题
- iOS 堆栈获取异常分析
- “另类”计算IP地址和子网划分
- 计算机系统的大脑是什么,埃隆·马斯克认为人类未来的大脑计算机系统
- mysql连接timeout_mysql 连接超时wait_timeout问题解决
- BZOJ 3168 [Heoi2013]钙铁锌硒维生素 ——矩阵乘法 矩阵求逆