HTML5中 canvas 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. 标签只是图形容器,您必须使用脚本来绘制图形。你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。
1、获取绘图上下文: getContext()
这个需要调用getContext()方法并传入上下文的名字,传入“2d”,就可以获取2D的上下文对象:
var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas >元素
if(drawing.getContext){
var ctx=drawing.getContext("2d");
}
2、导出canvas 绘制的图像: toDataURL()
这个方法接收一个参数,即图像的MIME格式,适合用于创建任何的上下文
var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas >元素
if(drawing.getContext){
var ctx=drawing.getContext("2d");
//获取图像的数据URL
var imgURL=drawing.toDataURL("image/png");
//显示图像
var image=document.creatElement("img");
image.src=imgURL;
document.body.appendChild(image);
}
3、填充和矩形的填充: fillStyle和fillRect
填充是用指定的样式填充图形,可以是CSS颜色,渐变,或图案;fillRect(x,y,width,height) 方法定义了矩形当前的填充方式,x为矩形x坐标,y为矩形y坐标,width和height是矩形的宽度和高度。这些参数的单位是像素。
var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas >元素
if(drawing.getContext){
var ctx=drawing.getContext("2d");
//填充颜色黑色
ctx.fillStyle="#000";
//在画布上绘制 200x200 的矩形,从左上角开始 (0,0)。
ctx.fillRect(0,0,200,200);
}
4、描边和矩形的描边: strokeStyle和strokeRect
描边是只在图形的边缘画线;strokeRect(x,y,width,height) 方法定义了矩形当前的填充方式,x为矩形x坐标,y为矩形y坐标,width和height是矩形的宽度和高度。这些参数的单位是像素。
var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas >元素
if(drawing.getContext){
var ctx=drawing.getContext("2d");
//描边红色
ctx.strokeStyle="#red";
//在画布上绘制 200x200 的矩形,从左上角开始 (0,0)。
ctx.strokeRect(0,0,200,200);
}
6、清除矩形: clearRect()
这个方法用于清除画布上的矩形区域,本质上是可以把绘制上下文中的某一个矩形区域变成透明。
7、绘制路径
- beginPath():起始一条路径,或重置当前路径;
- arc(x,y,r,sAngle,eAngle,counterclockwise):创建弧/曲线(用于创建圆形或部分圆)
- arcTo(x1,y1,x2,y2,r):创建两切线之间的弧/曲线;从上一点开始绘制一条弧线,到(x2,y2)为止,并且以给定的半径radius穿过(x1,y1)
- bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y):创建三次方贝塞尔曲线;从上一点开始绘制一条曲线,到(x,y)为止,并且以(c1x,c1y)和(c2x,c2y)为控制点
- lineTo(x,y): 添加一个新点,然后在画布中创建从该点到最后指定点的线条;从上一点开始绘制一条直线,到(x,y)为止
- moveTo(x,y):把路径移动到画布中的指定点,不创建线条;将绘图游标移动到(x,y),不画线
- quadraticCurveTo(cx,cy,x,y):创建二次贝塞尔曲线;从上一点开始绘制一条二次曲线,到(x,y)为止,并且以(cx,cy)为控制点
- rect(x,y.width,height):从点(x,y)开始绘制一个矩形,宽度和高度分别是width和height指定,这个方法绘制的是矩形的路径而不是fillRect()和strokeRect()所绘制的独立的形状
- fill():填充当前绘图(路径);如果路径已完成想用fillStype来填充它,就使用fill()方法;
- stroke():绘制已定义的路径的描边
- clip():从原始画布剪切任意形状和尺寸的区域
- closePath():创建从当前点回到起始点的路径
8、绘制文本:fillText()和strokeText()
- font:表示文本样式、大小及字体
- textAlign:表示文本对其方式
- textBaseline:表示文本的基线
ctx.font="bold 16px Arial";
ctx.textAlign="start";
ctx.textBaseline="middle";
9、变换
- rotate(angle):围绕原点旋转图像angle弧度
- scale(scaleX,scaleY):缩放图像,在x方向乘以scaleX,在y方向乘以scaleY,scaleX和scaleY默认都是1.0
- translate(x,y):将坐标原点移动到(x,y)。执行这个变换之后,坐标(0,0)会变成之前由(x,y)表示的点
- setTransform(a,b,c,d,e,f):将变换矩阵重置为默认状态,然后再调用transform()
- transform(a,b,c,d,e,f):直接修改变换矩阵,方式是乘以如下矩阵:
a c e
b d f
0 0 1
//变换原点-从(0,0)变换成(100,100)
ctx.translate(100,100);
//旋转
ctx.rotate(1);
//缩放一倍
ctx.scale(2,2);
10、绘制图像:drawImage()
- drawImage(img,x,y):需要绘制的图像,源图像的x坐标和源图像的y坐标
- drawImage(img,x,y,width,height):需要绘制的图像,源图像的x坐标,源图像的y坐标,目标图像宽度和目标图像高度
- drawImage(img,sx,sy,swidth,sheight,x,y,width,height):需要绘制的图像,源图像的x坐标,源图像的y坐标,源图像宽度,源图像高度,目标图像的x坐标,目标图像的y坐标,目标图像宽度和目标图像高度
11、阴影
- shadowColor:用css格式表示阴影的颜色,默认是黑色
- shadowOffsetX:形状或路径x轴方向的阴影偏移量,默认为0
- shadowOffsetY:形状或路径y轴方向的阴影偏移量,默认为0
- shadowBlur:模糊的像素数,默认为0,即为不模糊
//设置阴影
ctx.shadowOffsetX=5;
ctx.shadowOffsetY=5;
ctx.shadowColor="red";
ctx.shadowBlur=4;
12、渐变:createLinearGradient()
- createLinearGradient()方法创建线性的渐变对象,渐变可用于填充矩形、圆形、线条、文本等等。其中有四个参数,ctx.createLinearGradient(x0,y0,x1,y1):x0是起点的x坐标,y0是起点的y坐标,x1是终点的x坐标,y1是终点的y坐标
- addColorStop(stop,color):stop介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置,color是在结束位置显示的 CSS 颜色值
//一个从黑到红再到白的渐变
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop(0,"black");
gradient.addColorStop(0.5,"red");
gradient.addColorStop(1,"white");
//绘制矩形-渐变
ctx.fillStyle=gradient;
ctx.fillRect=(30,30,100,100);
13、模式:createPattern()
模式就是重复的图像,可以用来填充或者描边的图形,创建一个新的模式,可以调用createPattern()方法并传入两个参数:一个img元素和一个表示如何重复图像的字符串
var img=document.images[0];
var patt=ctx.createPattern(img,"repeat");
//绘制矩形-模式
ctx.fillStyle=patt;
ctx.fillRect=(30,30,100,100);