canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
1、JavaScript 使用 id 来寻找 canvas 元素：
var c=document.getElementById("myCanvas");
2、创建 context 对象：
var cxt=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
3、下面的两行代码绘制一个红色的矩形：
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。
实例：
1、绘制圆形
arc(cx,cy,radius,start_angle,end_angle,direction);cx 水平坐标cy 垂直坐标radius 圆心start-angel 圆周起始位置 （下面配图详细解释）end_angle 弧长 Math.PI是半圆 Math.PI*2是整个圆 0.5为四分之一direction 顺、逆时针 false为逆时针，true为顺时针（决定了圆弧的方向）
<!DOCTYPE html>
<html>
<head>
<title>canvas_arc 圆形</title>
<style type="text/css">
body {
text-align: center;
}
#myCanvas {
1000px;
height: 500px;
border: 2px dotted blue;
}
</style>
<!--只有宽高大概这个比例（2:1）时才是圆形-->
</head>
<body>
<canvas id="myCanvas">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var cv=document.getElementById("myCanvas");
var cvs=cv.getContext("2d");
cvs.fillStyle="#FF0000";//cvs.fillStyle="blue";设置填充色
cvs.beginPath();
cvs.arc(70,18,15,0,Math.PI*2,true);//水平坐标、垂直坐标、圆心、圆周起始位置、弧长（Math.PI是半圆 Math.PI*2是整个圆 0.5为四分之一）、 false为逆时针，true为顺时针（决定了圆弧的方向）
cvs.closePath();
cvs.fill();
</script>
</body>
</html>
2、绘制多边形
<!DOCTYPE html>
<html>
<head>
<title>canvas_line</title>
<style type="text/css">
#myCanvas {
200px;
height: 100px;
border: 2px solid blue;
}
</style>
</head>
<body>
<p>绘制直线</p>
<canvas id="myCanvas">
Your browser does not support the canvas element;
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cvs = c.getContext("2d");//创建canvas对象，getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
cvs.moveTo(50, 20);
cvs.lineTo(150, 50);
cvs.lineTo(10, 50);
//cvs.lineTo(50,20);
cvs.stroke();//必须有
</script>
</body>
</html>
3、绘制矩形
<!DOCTYPE html>
<html>
<head>
<title>canvas_rect 绘制矩形</title>
<!--html5 中center报错-->
<style type="text/css">
body {
text-align: center;
}
#myCanvas {
300px;
height: 300px;
border: 2px dotted red;
}
</style>
</head>
<body>
<p>canvas 绘制矩形</p>
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var can = document.getElementById("myCanvas");
var cvs=can.getContext("2d");
cvs.fillStyle="#FF0000";
cvs.fillRect(2,2,268,75);
</script>
</body>
</html>
4、获得鼠标滑过坐标
<!DOCTYPE html>
<html>
<head>
<title>canvas绘画 获取鼠标移过坐标</title>
<style type="text/css">
#coorDiv {
float: left;
199px;
height: 99px;
border: 2px solid blue;
margin-right: 10px;
}
</style>
<script type="text/javascript">
function canvas_getCoordinates(e) {
x = e.clientX;
y = e.clientY;
document.getElementById("xyCoordinates").innerHTML = "Coordinates:("
+ x + "," + y + ")";
}
function canvas_clearCoordinates() {
document.getElementById("xyCoordinates").innerHTML = "";
}
</script>
</head>
<body style="margin: 10px;">
<p>把鼠标悬停在下面的矩形上会看到坐标：</p>
<div id="coorDiv" onmouseover="canvas_getCoordinates(event)"
onmouseout="canvas_clearCoordinates()"
onmousemove="canvas_getCoordinates(event)"></div>
<br>
<br>
<div id="xyCoordinates"></div>
</body>
</html>
5、绘制背景渐变
定义和用法
createLinearGradient() 方法创建线性的渐变对象。
渐变可用于填充矩形、圆形、线条、文本等等。
提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。
提示：请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。
| JavaScript 语法： | context.createLinearGradient(x0,y0,x1,y1); |
|---|
参数值
| 参数 | 描述 |
|---|---|
| x0 | 渐变开始点的 x 坐标 |
| y0 | 渐变开始点的 y 坐标 |
| x1 | 渐变结束点的 x 坐标 |
| y1 | 渐变结束点的 y 坐标 |
<!DOCTYPE html>
<html>
<head>
<title>canvas_jianbian绘制渐变背景</title>
<style type="text/css">
body {
text-align: center;
}
#myCanvas {
200;
height: 100;
border: 2px dotted blue;
}
</style>
</head>
<body>
<canvas id="myCanvas">
Your browser does not support the canvas element;
</canvas>
<script type="text/javascript">
var cv = document.getElementById("myCanvas");
var cvs = cv.getContext("2d");
var cld = cvs.createLinearGradient(0, 0, 175, 50);//方法创建线性的渐变对象
cld.addColorStop(0, "blue");//#FF0000
cld.addColorStop(1, "red");//#00FF00
//矩形填充
cvs.fillStyle = cld;
cvs.fillRect(10, 10, 175, 50);//左上角起点坐标、长、宽
</script>
</body>
</html>
定义一个渐变（从上到下）作为矩形的填充样式：
JavaScript：
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
定义一个从黑到红再到白的渐变，作为矩形的填充样式：
JavaScript：
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
<!DOCTYPE html>
<html>
<head>
<title>canvas_image把图像放置到画布上</title>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
<script src="../js/jquery-1.7.2.js"></script>
<style type="text/css">
body {
text-align: center;
}
#myCanvas {
600;
height: 500;
border: 2px solid blue;
}
</style>
</head>
<body>
<br>
<canvas id="myCanvas">
Your browser does not support the canvas element;
</canvas>
<script type="text/javascript">
var cv = $("#myCanvas")[0];//document.getElementById("myCanvas");
var cvs = cv.getContext("2d");
var img = new Image();
img.src = "../images/dog.bmp";
cvs.drawImage(img, 10, 0,100,100);//左上角坐标、宽高
</script>
</body>
</html>
每 20 毫秒，代码就会绘制视频的当前帧
var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play',function() {var i=window.setInterval(function() //不停的调用相关函数
{ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);