HTML5 Canvas

canvas元素用于在网页上绘制图形

---

什么是canvas？

HTML5的canvas元素使用JavaScript在网页上绘制图像。

画布是一个矩形区域，你可以控制其每一像素。

canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

---

创建canvas元素

<!-- 向HTML5页面添加canvas元素，规定元素的id、宽度和高度 -->
<canvas id="myCanvas" width="200" height="100"></canvas>

<script type="text/javascript">
	//用id来寻找canvas元素
	var c = document.getElementById("myCanvas");
	//创建context对象，这个对象拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
	var cxt = c.geContext("2d");
	//将其染成红色
	cxt.fillStyle = "#FF0000";
	//规定了形状、位置和尺寸
	cxt.fillRect(0, 0, 150, 75);
</script>

1. fillRect()方法

• 定义和用法：填充一个矩形
• 语法： fillRect(x, y, width, height)
  • x, y ：矩形的左上角的坐标；width, height：矩形的大小
• fillRect()方法使用fillStyle属性所指定的颜色、渐变和模式来填充指定的矩形

2. lineTo()方法

• 定义和用法：该方法添加一个新点，然后创建从该点到画布中最后指定点的线条(该方法并不会创建线条)。stroke()方法在画布上绘制确切的路径
• 语法：context.lineTo(x, y);

3. stroke()方法

• 定义和用法：stroke()方法会实际地绘制出通过moveTo()和lineTo()方法定义的路径。默认颜色是黑色。请使用strokeStyle属性来绘制另一种颜色/渐变。
• 语法：context.stroke();

4. fillStyle()方法

• 定义和用法：设置或返回用于填充绘画的颜色、渐变或模式
• 属性值：color(指示绘图填充色的CSS颜色值。默认值是#000000)和gradient（用于填充绘图的渐变对象（线性或放射性））

5. beginPath()方法

• 定义和用法： beginPath()方法开始一条路径，或重置当前的路径。
  • 使用这些方法来创建路径：moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。stroke()方法在画布上绘制确切的路径
• 语法：context.fillRect(x, y, width, height);

6. arc()方法

• 定义和用法：创建弧/曲线（用于创建圆或部分圆）。如需通过arc()来创建圆，请把起始角设置为，结束角设置为2*Math.PI。请使用stroke()或fill()方法在画布上绘制实际的弧。
• 语法：context.arc(x, y, r, sAngle, eAngle, counterclockwise);

参数值

参数	描述
x	圆的中心的 x 坐标。
y	圆的中心的 y 坐标。
r	圆的半径。
sAngle	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle	结束角，以弧度计。
counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

• 中心：arc(100, 75, 50, 0*Math.PI, 1.5*Math.PI)
• 起始角：arc(100,75,50,0,1.5*Math.PI)
• 结束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)

7. closePath()方法

• 定义和用法：创建从当前点到开始点的路径。使用stroke()方法在画布上绘制确切的路径。使用fill()方法来填充图像（默认是黑色的）。使用fillStyle属性来填充另一个颜色/渐变
• 语法：context.closePath();

---

实例

1.线条

<!-- 向HTML5页面添加canvas元素，规定元素的id、宽度和高度 -->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas>

<script type="text/javascript">
	//用id来寻找canvas元素
	var c = document.getElementById("myCanvas");
	//创建context对象，这个对象拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
	var cxt = c.geContext("2d");
    //定位坐标(10, 10)
	cxt.moveTo(10, 10);
    //添加新点(150,50)
	cxt.lineTo(150,50);
    //添加新点(10,50)
	cxt.lineTo(10,50);
    //画出moveTo和lineTo()的路径
	cxt.stroke();
</script>

2. 圆形 

<!-- 向HTML5页面添加canvas元素，规定元素的id、宽度和高度 -->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas>

<script type="text/javascript">
	//用id来寻找canvas元素
	var c = document.getElementById("myCanvas");
	//创建context对象，这个对象拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
	var cxt = c.geContext("2d");
	cxt.fillStyle = "#FF0000";
	cxc.beginPath();
	cxt.arc(70, 18, 15, 0, Math.PI*2, true);
	cxt.closePath();
	cxt.fill();
</script>

3. 渐变

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>


<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
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);

</script>

 

4.  图像

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>


<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);

</script>