菜鸟教程之html5学习，Canvas画布、渐变，数学公式、符号
的书写
html5元素及功能: 图形的绘制，多媒体内容，更好的页⾯结构，更好的形式 处理，和⼏个api拖放元素，定位，包括⽹页 应⽤程序缓存，存储，⽹络⼯作者，等
HTML5新元素
标签定义图形，⽐如图表和其他图像。该标签基于 JavaScript 的绘图 API
定义⾳频内容多媒体
定义视频（video 或者 movie）多媒体
定义多媒体资源 <video> 和 <audio> 多媒体
定义嵌⼊的内容，⽐如插件。多媒体
为诸如 <video> 和 <audio> 元素之类的媒介规定外部⽂本轨道。多媒体
定义选项列表。请与 input 元素配合使⽤该元素，来定义 input 可能的值。表单
规定⽤于表单的密钥对⽣成器字段。表单
定义不同类型的输出，⽐如脚本的输出。表单
定义页⾯独⽴的内容区域。
定义页⾯的侧边栏内容。
允许您设置⼀段⽂本，使其脱离其⽗元素的⽂本⽅向设置。
定义命令按钮，⽐如单选按钮、复选框或按钮
⽤于描述⽂档或⽂档某个部分的细节
定义对话框，⽐如提⽰框
标签包含 details 元素的标题
规定独⽴的流内容（图像、图表、照⽚、代码等等）。
定义 <figure> 元素的标题
定义 section 或 document 的页脚。
定义了⽂档的头部区域
定义带有记号的⽂本。
定义度量衡。仅⽤于已知最⼤和最⼩值的度量。
定义导航链接的部分。
定义任何类型的任务的进度。
定义 ruby 注释（中⽂注⾳或字符）。
定义字符（中⽂注⾳或字符）的解释或发⾳。
在 ruby 注释中使⽤，定义不⽀持 ruby 元素的浏览器所显⽰的内容。
定义⽂档中的节（section、区段）。
定义⽇期或时间。
规定在⽂本中的何处适合添加换⾏符
<canvas>
参考⼿册:www.runoob/tags/ref-canvas.html
1.在画布上画出⼀个矩形
<body>
<canvas id="myCanvas" width="200" height="100" >
您的浏览器不⽀持 HTML5 canvas 标签。
</canvas>
<script>
var ElementById("myCanvas");//⾸先，到 <canvas> 元素:
var Context("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）右</script>
</body>
svg和canvas的区别
效果图：在200*100的画布创建了⼀个长宽为150*75的红⾊矩形
2.在画布上画出⼀条直线
您的浏览器不⽀持 HTML5 canvas 标签。</canvas>
<script>
var ElementById("myCanvas");
var Context("2d");
ctx.lineTo(50,25);//结束坐标
ctx.lineTo(80,40);//结束坐标
ctx.lineTo(200,100);//结束坐标
ctx.stroke();//两点间画线
</script>
</body>
效果图：开始结束
3.在画布上画出圆或圆弧
<body>
<canvas id="myCanvas" width="200" height="100" >您的浏览器不⽀持 HTML5 canvas 标签。</canvas>
<script>
var ElementById("myCanvas");
var Context("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.在画布上写出字：
浏览器不⽀持canvas标签。</canvas>
<script>
var ElementById("myCanvas");
var Context("2d");
ctx.font="30px Arial";
ctx.fillText("Hello Amilsc",10,50);//实⼼字母
//ctx.strokeText("Hello Amilsc",10,50);//空⼼字
</script>
</body>
效果图：
5.线性渐变
<script>
var ElementById("myCanvas");
var Context("2d");
// Create gradient创建渐变
var ateLinearGradient(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.渐变圆
var ElementById("myCanvas");
var Context("2d");
// 创建渐变
var ateRadialGradient(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" >您的浏览器不⽀持 HTML5 canvas 标签。</canvas>
<script>
var ElementById("myCanvas");
var Context("2d");
var ElementById("scream");
ctx.drawImage(img,10,10);//图⽚开始的位置（10，10）
}
</script>
</body>
效果图：
Canvas与SVG:
Canvas SVG

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。