一、基本内容
Canvas在HTML页面提供画布的功能, 在画布中绘制各种图形
Canvas绘制的图形与HTML页面无关,无法通过DOM获取绘制的图形,也无法为绘制的图形绑定DOM事件,只能使用Canvas提供的API
二、Canvas用途
① 在HTML页面中绘制图表(例如柱状图、饼状图等)
② 网页游戏 - Flash技术
使用HTML5中的Canvas
三、如何使用Canvas
① 在HTML页面中定义<canvas>元素
②在javascript代码中,获取<canvas>元素
③创建画布对象,用getContext('2d')方法
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<meta charset="utf-8" />
</head>
<body>
<!--①在HTML页面中定义canvas元素-->
<canvas id="canvas" width="500px" height="300px" style="background:pink"></canvas>
<script>
// ② 获取<canvas>元素
var canvas = document.getElementById("canvas");
/* ③ 创建画布对象(根据<canvas>元素)
getContext()方法, 返回值,就是画布对象
参数 - 表示创建的是2D效果还是3D效果
参数必须是"2d"或"3d"(固定写法)
*/
var context = canvas.getContext("2d");
// ④ 绘制图形(前面的三步是固定写法)
context.fillRect(10,10,100,100);
</script>
</body>
</html>
四、 绘制矩形
fillRect(x,y,width,height) - 实心矩形
strokeRect(x,y,width,height) - 空心矩形
clearRect(x,y,width,height) - 清除指定区域的矩形 (可以组合使用制作直角折线)
x和y - 矩形的左上角坐标值, width - 设置矩形的宽度,height - 设置矩形的高度
设置颜色
fillStyle - 设置填充颜色
strokeStyle - 设置描边颜色
globalAlpha - 设置透明度(0-1)
五、绘制文字
方法
fillText(text,x,y) - 实心文字
text - 绘制的文字内容
x和y - 绘制的坐标值
strokeText(text,x,y) - 空心文字
属性
font - 类似于CSS中的font属性
textAlign - 设置文字的水平方向对齐
left - 左对齐,center - 水平居中,right - 右对齐
textBaseline - 设置文字的垂直方向对齐
top - 顶部对齐, middle - (垂直)居中对齐, bottom - 底部对齐,hanging - 悬挂基线,alphabetic - 字母基线
注意
无论是水平方向还是垂直方向对齐,基准线对齐,并不是文字对齐
无论是水平方向还是垂直方向对齐,并不是必要的属性(不使用也是可以的)
绘制基准线 context.beginPath();
context.moveTo(0,300);
context.lineTo(500,300);
context.stroke();
阴影效果
shadowColor - 设置阴影颜色
shadowOffsetX - 设置水平方向阴影
shadowOffsetY - 设置垂直方向阴影
shadowBlur - 设置阴影的模糊程度
六、通过创建路径创建图形
①(标识)方法
beginPath() - 表示开始创建路径
closePath() - 表示结束创建路径
② 设置方法
矩形: rect(x,y,width,height) - 设置矩形形状
x和y - 设置矩形的左上角坐标值, width和height - 设置矩形的宽度和高度
圆形: arc(x,y,radius,startAngle,endAngle,direction) - 设置圆形形状
x和y - 设置圆形的圆心坐标值,radius - 设置圆形的半径,startAngle和endAngle - 设置圆形的起始位置
direction - 按照顺时针或逆时针绘制,可以不用写,默认false表顺时针
③绘制方法
stroke() - 绘制轮廓
fill() - 绘制填充
④ 使用创建路径绘制实心圆形
context.beginPath();
context.arc(170,60,50,0,Math.PI*2);
context.fill(); //context.close()可以不用写
七、 绘制线条(直线和折线、多边形) - 创建路径
moveTo(x,y) - 设置这条线的起点坐标值
lineTo(x,y) - 设置这条线的终点(折点)坐标值
设置线条
lineWidth - 设置线条的宽度, 默认值为1(px)
lineCap - 设置线条端点的形状
butt - 默认值,平直, round - 圆角, square - 正方向
lineJoin - 设置两条线焦点的形状
miter - 默认值,尖角, round - 圆角, bevel - 斜角
miterLimit - 配合lineJoin使用
lineJoin设置为miter,该属性值设置尖角的延伸范围,为长度值。
八、图片处理
① 绘制图片
drawImage(img,x,y) - 按照图片原大小加载
img - 当前加载(绘制)的图片,x和y - 绘制图片的坐标值(左上角)
drawImage(img,x,y,width,height) - 按照指定大小加载图片
img - 当前加载(绘制)的图片,x和y - 绘制图片的坐标值(左上角), width和height - 设置绘制图片显示的宽度和高度
* 注意: 必须保证图片加载完毕(onload事件)后,再绘制图片
② 平铺图片
createPattern(img,type)
img - 平铺的图片
type - 平铺的方式
repeat - 平铺, no-repeat - 不平铺, repeat-x - 水平方向平铺, repeat-y - 垂直方向平铺
③ 切割图片 clip() - 切割(按照创建路径使用)
<!DOCTYPE html>
<html>
<head>
<title>Canvas处理切割图片</title>
<meta charset="utf-8" />
</head>
<body>
<canvas id="canvas" width="512px" height="500px"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
// 绘制图片
var myimg = new Image();
myimg.src = "1.jpg";
myimg.onload = function(){
context.drawImage(myimg,0,0,512,384);
}
// 切割图片
context.beginPath();
context.arc(240,100,80,0,Math.PI*2);
context.clip();
</script>
</body>
</html>
九、 画布方法
①scale(x,y) - 缩放(缩小或放大)
x - 表示水平方向的缩放, y - 表示垂直方向的缩放
参数的取值
如果为1的话,表示不缩放(原大小), 如果小于1的话,表示缩小, 如果大于1的话,表示放大
② translate(x,y) - 重新定位(x,y)
x,y - 新的坐标值, 注意 - x和y是相对于上次定位坐标值
③rotate(旋转角度) - 旋转画布
公式为 degrees * Math.PI / 180;