菜鸟教程之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>	规定在文本中的何处适合添加换行符

参考手册: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
依赖分辨率不支持事件处理器弱的文本渲染能力能够以 .png 或 .jpg 格式保存结果图像最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不依赖分辨率支持事件处理器最适合带有大型渲染区域的应用程序（比如谷歌地图）复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）不适合游戏应用

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画布、渐变，数学公式、符号的书写

猜你喜欢