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

来源：互联网发布：花千骨网络视频编辑：程序博客网时间：2024/05/01 20:52

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

Html5是html+css+javascript的综合

html5代码做了简化：

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

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

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

一、html5新增的标签

(1)<canvas>标签

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

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

（1）

绘制矩形：

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

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

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

//绘制颜色

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

//开始填充矩形

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

</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" />