一、简单图形,整套的属性和方法专门用于绘制矩形:
1、fillStyle可以设置为CSS颜色、一个图案或一种颜色渐变。fillStyle默认是纯黑色,你可以设置成你喜欢的任意颜色。只要页面打开着,每个绘图上下文都会记录自己的属性,除非你重置过它。
2、fillRect(x,y,width,height)绘制一个矩形,并以当前的fillStyle来填充。
3、srtokeStyle和fillStyle一样,可以设置为CSS颜色、一个图案或一种颜色渐变。
4、strokeRect(x,y,width,height)使用当前的storke style来绘制一个矩形,strokeRect并不填充中间区域,而只绘制矩形的边缘。
5、clearRect(x,y,width,height)清除指定矩形区域的像素。
二、路径
按照惯例,不论开始绘制何种图形,第一个需要调用的就是beginPath。这个简单的函数不带任何参数,它用来通知canvas将要开始绘制一个新的图形了。对于canvas来说,beginPath函数最大的用处是canvas需要据此来计算图形的内部和外部的范围,以便完成后续的描边和填充。
路径会跟踪当前坐标,默认值是原点。canvas本身也跟踪当前坐标,不过可能通过绘制代码来修改。
每一个canvas都有一个路径,定义路径就如同用铅笔作画。你可以任意作地画,但它不一定是最终作品的一部分,直到你拿起画笔沾上墨水描绘这条路径。
moveTo(x,y):不绘制,只是将当前位置移动到新目标坐标(x,y),并作为线条开始点。
lineTo(x,y):绘制线条到指定的目标坐标(x,y),并且在两个坐标之间画一条直线。不管调用它们哪一个,都不会真正画出图形,因为我们还没有主,调用stroke(绘制)和fil(填充)函数。当前,只是在定义路径的位置,以便后面绘制时使用。
closePath(),这个函数跟lineTo很像,唯一的差别在于closePath会将路径的起始坐标自动作为目标坐标。closePath还会通知canvas当前绘制的图形已经闭合或者形成了完全封闭的区域。起连接起点,闭合路径的作用。
三、文本
操作canvas文本的方式与操作其他路径对象的方式相同:可以描绘文本轮廓和填充文本内部,同时,所有能够应用于其他图形的变换和样式都能用于文本。context对象的文本绘制功能由两个函数组成:
fillText(text,x,y,maxwidth)
trokeText(text,x,y,maxwidth)
两个的参数完全相同,必选参数包括文本参数以及用于指定文本位置的坐标参数。maxwidth是可选参数,用于限制字体大小,它会将文本字体强制收缩到指定尺寸。此外,还有一个measureText函数可供使用,该函数会返回一个度量对象,其包含了在当前context环境下指定文本的实际显示宽度。
为了保证文本在各浏览器下都能正常显示,在绘制上下文里有以下字体属性
1、font可以是CSS字体规则中的任何值。包括:字体样式、字体变种、字体大小与粗细、行高和字体名称。
2、textAlign控制文本的对齐方式。它类似于(但不完全相同)CSS中的text-align。可能的取值为:start,end,left,right,和center.
3、textBaseline控制文本相对于起点的位置。可以取值有top,hanging,middle,alphabetic,ideographic和bottom。对于简单的英文字母,可以放心的使用top,middle或bottom作为文本基线。
四、颜色渐变
一旦我们拥有了绘图上下文,就可以开始定义一个颜色渐变。渐变是两种或更多颜色的平滑过度。canvas的绘图上下文支持两种类型的渐变:
1、createLinearGradient(x0,y0,x1,x1)沿着直线从(x0,y0)至(x1,y1)绘制渐变。
2、createRadialGradient(x0,y0,r0,x1,y1,r1)沿着两个圆之间的锥面绘制渐变。前三个参数代表开始的圆,圆心为(x0,y0),半径为r0。最后三个参数代表结束的圆,圆心为(x1,y1),半径为r1.
例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<!--control 属性供添加播放、暂停和音量控件-->
<video src="1.mp4" controls="controls">
您的浏览器不支持video;
</video>
<!--canvas huabu-->
<canvas id="canvas1" width="320" height="200">
您的浏览器不支持canvas元素;
</canvas>
<canvas id="canvas2" width="320" height="200">
您的浏览器不支持canvas元素;
</canvas>
<div id="div1" οnmοusemοve="getCo(event)" οnmοuseοut="clearCo()" style="width:300px;height:200px;border:1px solid green" >
<div id="xycoordiv"></div>
</div>
</body>
<script>
//先找到canvas这个画布
var c=document.getElementById("canvas1");
//获得对象,这个对象是用来画图的
var ctx = c.getContext('2d');
//fillStyle 方法将其染成红色,
ctx.fillStyle="#ff0000";
//开始绘图了,通过fillRect(),四个参数,开始的坐标,大小
ctx.fillRect(150, 150, 300, 200);//fillRect 方法规定了形状、位置和尺寸
//getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
var c1=document.getElementById("canvas2");
var ctx1=c1.getContext("2d");
//在绘图之前通知canvas我要开始绘图了
ctx1.beginPath();
// math.PI获得圆周率,会出一个半圆,*2获得一个圆
ctx1.arc(100,100,15,0,Math.PI*2,true);
//闭合圆
ctx1.closePath();
ctx1.fillStyle="green";
ctx1.fill();
//clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标
function getCo(e){
var x=e.clientX;//获得x的坐标
var y=e.clientY;
document.getElementById("xycoordiv").innerHTML="当前坐标是:"+x+','+y;
}
function clearCo(){
document.getElementById("xycoordiv").innerHTML="";//这个就是当你鼠标放在图层上时就会给出鼠标当前位置的坐标
}
</script>
</html>