JavaScript 笔记(15)- canvas

原创 乘风逐月 随笔 JavaScript 218阅读 2018-06-07 16:12:07 举报

一、2D上下文

在 canvas 上绘图,需要取得绘图上下文。调用元素的 getContext() 方法,传入'2d' 这个参数可获取2D上下文。2D 上下文的坐标开始于 canvas 元素的左上角,原点坐标是(0,0),所有坐标值都基于这个原点计算。width 和 height 表示水平和垂直方向上可用的像素数目。

二、填充和描边

2D上下文的基本操作是填充和描边。填充是用指定样式(颜色、渐变或图像)填充图形;描边是在图形的边缘划线。这两个操作的结果取决于两个属性:fillStyle 和 strokeStyle。这两个属性的值可以是字符串、渐变对象或模式对象。默认值是 '#000'。

1.绘制矩形

与绘制矩形有关的方法有: fillRect()、storkeRect()、clearRect().这三个方法都接受四个参数:矩形的x坐标,矩形的y坐标,矩形的宽,矩形的高。这些参数的单位都是像素。
(1)fillRect()
fillRect() 方法在画布上绘制的矩形会填充指定颜色,填充的颜色通过 fillStyle 属性指定。

(2)strokeRect()
storkeRect() 方法在画布上绘制的矩形会按指定的颜色描边,描边的颜色通过 strokeStyle 属性指定。

a. lineWidth: 该属性控制描边的线条粗细,该属性的值可以是任意整数。
b. lineCap: 该属性设置线条末端的形状是平头、圆头还是方头,值为'butt'、'round'、'square'。
c. lineJoin: 该属性控制线条相交的方式是圆交、斜交还是斜接,值为'round'、'bevel'、'miter'。
(3)clearRect()
clearRect() 方法用于清除画布上的矩形区域。

2.绘制路径

绘制路径的方法:
(1)beginPath(): 表示开始绘制新路径
(2)moveTo(x,y): 将绘图游标移动到(x,y),不划线。
(3)arc(x,y,radius,startAngle,endAngle,counterclockwise): 以 (x,y) 为圆心绘制一条弧线,弧线半径为 radius,起始结束角度(用弧度表示)分别为 startAngle 和 endAngle。最后的 counterclockwise 表示是否按逆时针方向计算,值为false 表示按顺时针方向计算。
(4)bezierCurveTo(c1x,c1y,c2x,c2y,x,y): 从上一点开始绘制一条曲线,到(x,y)为止,并且以(c1x,c1y)和(c2x,c2y)为控制点。
(5)arcTo(x1,y1,x2,y2,radius): 从 (x1,y1) 为起点绘制一条弧线,到 (x2,y2) 为止,并以给定的半径 radius 穿过 (x1,y1)。
(6)lineTo(x,y): 从上一点开始绘制一条直线,到(x,y)为止。
(7)quadraticCurveTo(cx,cy,x,y): 从上一点开始绘制一条二次曲线,到(x,y)为止,并且以(cx,cy)作为控制点。
(8)rect(x,y,width,height): 从点(x,y)开始绘制一个宽高为width和height的矩形,这个方法绘制的是矩形路径,不是 strokeRect() 和 fillRect() 绘制的独立形状。
(9)closePath(): 连接起点和重点。
(10)fill(): 填充路径。
(11)stroke(): 描边路径。
(12)clip(): 在路径上剪切一个区域。

3.绘制文本

绘制文本主要有两个方法:fillText() 和 strokeText()。这两个方法都可以接受4个参数:要绘制的文本字符串、x坐标、y坐标、可选的最大像素宽度。这两个方法都以下列3个属性为基础。
a. font: 表示文本样式、大小及字体,用 css 中指定字体格式来指定。
b. textAlign: 表示文本对齐方式。可能的值有: 'start'、'end'、'left'、'right'和'center'。
c. textBaseline: 表示文本的基线。可能的值:'top'、'hanging'、'middle'、'bottom'。
这几个属性都有默认值,不需要每次都重新设置值。
fillText() 方法使用fillStyle 属性绘制文本,strokeText()方法使用 strokeStyle 属性为文本描边。
为刚才的示例添加数字:

4.变换

2D 上下文支持各种基本的绘制变换:
(1)rotate(angle): 围绕原点旋转图像 angle 弧度。
(2)scale(scaleX,scaleY): 缩放图像,在x方向乘以 scaleX,在y方向乘以 scaleY。scaleX和scaleY的默认值为1。
(3)translate(x,y): 将坐标原点移动到(x,y)。
(4)transform(a,b,c,d,e,f): 直接修改矩阵。a:水平缩放绘图;b:水平倾斜绘图;c:垂直倾斜绘图;d:垂直缩放绘图;e:水平移动绘图;f:垂直移动绘图。
(5)setTransform(a,b,c,d,e,f):将矩阵重置为默认状态,然后以相同的参数运行 transform()。

5. 追踪上下文状态

(1)save(): 调用该方法后,当时的所有设置都会进入一个栈结构,得以妥善保存。该方法只保存对绘图上下文的设置和变换,不会保存上下文的内容。
(2)restore(): 想要回到某一步保存前的设置,调用该方法,在保存设置的栈结构中向前返回一级,恢复之前的状态。
连续调用save(),可以把更多设置保存到栈结构中,再连续调用restore()则可以一级一级返回。

6.绘制图像

drawImage(): 想要把图像绘制到画布上,可以调用该方法。
调用该方法,有三种参数传入模式:
a. drawImage(imgElement,x,y): 传入一个 img 元素,以及绘制该图像的起点x和y坐标。
b. drawImage(imgElement,x,y,width,height): 传入一个 img 元素,绘制该图像的起点x和y坐标,图像的宽和高
c. drawImage(img,imgX,imgY,imgW,imgH,targetX,targetY,targetW,targetH): 参数依次表示:要绘制的图像,源图像的Y坐标,源图像的Y坐标,源图像的宽,源图像的高,目标图像的X坐标,目标图像的Y坐标,目标图像的宽,目标图像的高。这样调用可以将某个图像中的某一部分绘制到上下文中。
例如: ctn.drawImage(img,0,10,50,50,0,100,40,60):表示原始图像的起点为(,10),宽高为50的这一部分,绘制到上下文中起点为(0,100),宽高为40和60的区域。
注: 要注意需要在图片加载完成时再绘制。

7.阴影

2D上下会根据以下几个属性,自动为形状或路径绘制出阴影。
(1)shadowColor: 用css格式表示的阴影颜色,默认为黑色
(2)shadowOffsetX: 形状或路径X轴方向的阴影偏移量,默认为0
(3)shadowOffsetY: 形状或路径的Y轴方向的阴影偏移量,默认为0
(4)shadowBlur: 模糊的像素数,默认为0,即不模糊
这些属性可以通过2D上下文对象来设置,只要在绘制之前设置,就能自动产生阴影效果。

8.渐变

(1)线性渐变
创建一个线性渐变,要使用createLinearGradient(startX,startY,endX,endY)方法,参数依次表示为: 起点的x坐标,起点的y坐标,终点的x坐标,终点的y坐标。

(2)径向渐变
创建一个径性渐变,要使用createRadialGradient()方法,这个方法接受6个参数,对应着两个圆的圆心和半径。前三个参数指定的是起点圆的圆心(x和y)及半径,后三个参数指定的是终点圆的圆心(x和y)及半径。可以把径向渐变想象成一个长圆筒,而这6个参数定义的正是这个筒的两个原形开口位置。如果把一个原形开口定义的比另一个小一些,那这个圆筒就变成了圆锥体,而通过移动每个圆形开口的位置,就可达到像旋转这个圆锥体一样的效果。

9.模式

模式是重复的图像,可以用来填充或描边图形。调用 createPattern() 方法并传入两个参数: 一个 HTML img 元素和一个表示如何重复图像的字符串。第二个参数值有: 'repeat'、'repeat-x'、'repeat-y'、'no-repeat'。

三、使用图像数据

通过 getImageData() 可以取得原始图像数据。这个方法接受4个参数: 要取得其数据的画面区域的x和y坐标以及该区域的像素宽度和高度。例如获取左上角坐标(10,5)、大小50x50像素的区域的图像数据:

imgData 是ImageData 的实例,每个实例都有三个属性: width、height和data。data 是一个数组,保存着图像中每一个像素的数据。在data 数组中,每一个像素用4个元素来保存,分别表示红、绿、蓝和透明度。因此,第一个像素就保存在数组的第0到3个元素中。每个元素的值都介入0到255之间,能够访问这些原始图像数据,就能操作这些数据。下面的例子是将一张图片变灰:

putImageData()方法是将图像数据绘制到画布上。

四、合成

有两个属性会影响到2D上下文操作:globalAlpha 和 globalCompositeOperation。指定一次值,后续操作都基于这个值。
(1)globalAlpha:介于0到1之间,用于指定所有绘制的透明度。默认值为0
(2)globalCompositeOperation: 表示后绘制的图形怎样与先绘制的图形结合,这个属性的值是字符串,可能值如下:
a.source-over(默认值): 后绘制的图形位于先绘制的图形的上方
b.source-in: 后绘制的图形与先绘制的图形重叠部分可见,两者的其他部分完全透明
c.source-out: 后绘制的图形与先绘制的图形不重叠部分可见,先绘制的图形完全透明
d.source-atop: 后绘制的图形与先绘制的图形重叠部分可见,先绘制的图形不受影响
e.destination-over: 后绘制的图形位于先绘制的图形的下方,只有之前透明像素下的部分才可见
d.destination-in: 后绘制的图形位于先绘制的图形的下方,两者不重叠部分完全透明
e.destination-out: 后绘制的图形擦除与先绘制的图形重叠的部分
f.destination-atop: 后绘制的图形位于先绘制的图形的下方,两者不重叠的地方,先绘制的图形会变透明
g.lighter: 后绘制的图形与先绘制的图形重叠部分值相加,使该部分变亮
h.copy: 后绘制的图形完全替代与之重叠的先绘制图形

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复