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>