canvas属性 详细随笔
- getContext('2d'):
- 获得当前画布的绘制环境,目前唯一合法值“2d”,它返回一个对象,携带所有绘图API;rect(x, y, width, height):绘制矩形
-
ctx.rect(20,20,150,100):x:矩形左上角的x坐标y:矩形左上角的Y坐标width:矩形的宽度,以px计height:矩形的高度,以px计
-
arc(x, y, r, s, e, counterclockwise):绘制圆
- ctx.arc(100,75,50,0,2*Math.PI)
x:圆的中心的x坐标y:圆的中心的y的坐标r:圆的半径sAngle:起始角,以弧度计(弧的圆形的三点钟位置是0度)eAngle:结束角,以弧度计counterclockwise:可选,规定应该逆时针还是顺时针绘图,false=顺时针,true=逆时针
- ctx.arc(100,75,50,0,2*Math.PI)
- strokeStyle:属性设置或返回用于笔触的颜色、渐变或模式
context.strokeStyle=color|gradient|patternctx.strokeStyle = 'blue'
- stroke():实际地绘制出通过moveTo()和lineTo()方法定义的路径,默认颜色是黑色
ctx.stroke()提示:请使用strokeStyle属性来绘制另一种颜色/渐变
- lineWidth:属性设置或返回当前线条的宽度,以像素计
ctx.lineWidth = 10ctx.lineWidth = number
- fill():方法填充当前的图像(路径),默认颜色是黑色
ctx.fill()提示:请使用fillStyle属性来填充另一种颜色/渐变
- fillStyle:设置填充绘图的颜色、渐变或模式(类似于strokeStyle)
context.fillStyle=color|gradient|patternctx.fillStyle = '#00f'
- fillRect(x, y, width, height):绘制‘已填色’的矩形,默认的填充颜色是黑色
ctx.fillRect(20,20,150,100)x:矩形左上角的x坐标y:矩形左上角的Y坐标width:矩形的宽度,以px计height:矩形的高度,以px计提示:请使用fillStyle属性来设置用于填充绘图的颜色、渐变或模式
- beginPath():开始一条路径,或重置当前的路径
ctx.beginPath()提示:请使用这些方法来创建路径moveTo()、lineTo()、quadricCurveTo()/bezierCurveTo()、arcTo()、arc()请使用stroke()方法在画布上绘制确切的路径
- moveTo(x, y):将起始点移到某位置开始画图
moveTo(0, 0)x:路径的起始位置的x坐标y:路径的起始位置的y坐标
- lineTo(x, y):方法添加一个新点,然后创建从该点到画布中最后指定点的线条(该方法并不会创建线条)
lineTo(300, 300)x:路径的目标(结束)位置的x坐标y:路径的目标(结束)位置的y坐标提示:请使用stroke()方法在画布上绘制确切的路径常和moveTo配合使用,一个为起始点,一个为结束点,且lineTo可以有多个
- font:属性设置或返回画布上文本内容的当前字体属性
ctx.font = 'italic small-caps bold 12px arial'提示:同css的font属性相同,都有font-style、font-family等
- fillText(text, x, y, maxWidth):方法在画布上绘制填色的文本,文本的默认颜色是黑色
ctx.fillText('w3school.com.cn', 10, 90)text:规定在画布上输出的文本x:开始绘制文本的x坐标位置(相对于画布)Y:开始绘制文本的y坐标位置(相对于画布)maxWidth:可选,允许的最大文本宽度,以像素计提示:请使用font属性来定义字体和字号,并使用fillStyle属性以另一种颜色/渐变来渲染文本
- strokeText(text, x, y, maxWidth):在画布上绘制文本(没有填色),文本默认颜色是黑色
ctx.strokeText('w3school.com.cn', 10, 90)text:规定在画布上输出的文本x:开始绘制文本的x坐标位置(相对于画布)Y:开始绘制文本的y坐标位置(相对于画布)maxWidth:可选,允许的最大文本宽度,以像素计提示:请使用font属性来定义字体和字号,并使用strokeText属性以另一种颜色/渐变来渲染文本
- createLinearGradient(x, y, x1, y1):创建线性渐变,渐变可用于填充矩形、圆形、线条、文本等
var grd = ctx.createLinearGradient(0, 0, 170, 0)x:渐变开始点的x坐标y:渐变开始点的Y坐标x1:渐变结束点的x坐标y1:渐变结束点的Y坐标提示: 1、必须使用至少两种停止颜色2、请使用该对象作为strokeStyle或fillStyle属性的值3、请使用addColorStop()方法规定不同颜色、以及在gradient对象中的何处定位颜色
- createRadialGradient(x, y, r, x1, y1, r1):创建径向渐变,渐变可用于填充矩形、圆形、线条、文本等
var grd = ctx.createRadialGradient(0, 0, 170, 0)x:渐变开始圆的x坐标y:渐变开始圆的Y坐标r:开始圆的半径x1:渐变结束圆的x坐标y1:渐变结束圆的Y坐标r1:结束圆的半径提示: 1、必须使用至少两种停止颜色2、请使用该对象作为strokeStyle或fillStyle属性的值3、请使用addColorStop()方法规定不同颜色、以及在gradient对象中的何处定位颜色
- addColorStop(stop, color):规定gradient对象中的颜色和位置,此方法与createLinearGradient()或createRadialGradient()一起使用
grd.addColorStop(0, 'black'); grd.addColorStop(1, 'white');stop:介于0.0与1.0之间的值,表示渐变中开始与结束之间的位置color:在结束位置显示的css颜色提示:可以多次调用addColorStop()方法来改变渐变,如果不对gradient对象使用该方法,那么渐变将不可见,为了获得可见的渐变,需要创建至少一个色标
- drawImage(img, sx, sy, swidth, sheight, x, y, width, height):在画布上绘制图像、画布或视频,也可以绘制某些部分,以及增加或减少图像的尺寸
img:规定要使用的图像、画布或视频sx:可选,开始剪切的x坐标位置sy:可选,开始剪切的y坐标位置swidth:可选,被剪切图像的widthsheight:可选,被剪切图像的高度x:在画布上放置图像的x坐标位置y:在画布上放置图像的y坐标位置width:可选,要使用的图像的宽度(伸展或缩小图像)height:可选,要使用的图像的高度(伸展或缩小图像)
-
rect(), strokeRect() 和 fillRect() 的区别:fillRect()与strokeRect()在调用后会立即在画布上画出效果,而rect()不会立即将图形画出,只有在调用了stroke()方法之后,才会实际作用于画布。
- measureText()方法:
- 在画布上输出文本之前,检查字体的宽度;
- 定义和用法:
- measureText()方法返回包含一个对象,该对象包含以像素计的制定字体宽度;如果需要在文本向画布输出之前,就了解文本的宽度,就可以使用此方法;
- context.measureText(text).width:text是要测量的文本;
- eg:
- var c = document.getElementById('myCanvas')
- var ctx = c.getContext('2d')
- ctx.font = '30px Arial'
- var txt = 'Hello World'
- ctx.fillText('width:' + ctx.measureText(txt).width, 10, 50)
- ctx.fillText(txt, 10, 100)
注意:如果要使用jQuery去写canvas:jQuery返回的是jQuery对象,而jQuery对象是没有getContext方法的,需要把jQuery对象那个转换成DOM对象。其实jQuery对象就是类数组,用数组下标可以取得DOM对象(方法:$('#myCanvas')[0])