JavaScript Canvas——“2D上下文”的注意要点

  • A+
所属分类:JavaScript

Canvas支持基本绘图能力的2D上下文,以及基于WebGL的3D上下文

基本用法

  • canvas元素:定义画布
  • getContext()方法:定义2D、3D上下文
  • toDataURL()方法:生成图片格式获取URL链接(支持“image/png”;有浏览器也支持“image/jpeg”)

要使用canvas元素,必须先设置其width和height属性,指定可以绘图的区域大小.出现在开始和结束标签中的内容是后备信息,如果浏览器不支持就显示这些信息:

要在这块画布上绘图,需要取得绘图上下文,则需要调用getContext()方法并传入上下文的名字,例如传入"2d";

可以使用toDataURL()方法导出在canvas元素上绘制的图像如:

举个栗子:

填充和描边(基本操作)

填充,就是用指定的样式填充图形;描边,就是只在图形的边缘画线,分别涉及到两个属性:

  • fillStyle:填充
  • strokeStyle:描边

这两个属性接收值是字符串、渐变对象或模式对象,默认值是“#000000”:

绘制矩形

基本方法

  • fillRect()填充矩形
  • strokeRect()描边矩形
  • clearRect()清除矩形

四个方法都是接收4个参数:矩形的x坐标,矩形的y坐标,矩形的宽度和矩形的高度.这些参数的单位都是像素;

如填充一个矩形:

如描边一个矩形:

又如清除画布上的矩形区域:

控制描边的线条

  • lineWidth属性:任意整数作为参数;
  • lineCap属性:控制线条末端的形状是(“butt”平头、“round”圆头、“square”方头)
  • lineJoin属性:线条香蕉的方式是(“round”圆交、“bevel”斜交、“miter”斜接)

绘制路径

要绘制路径,首先必须调用beginPath()方法,表示要开始绘制新路径.然后,再通过调用下列方法来实际的绘制路径

  • beginPath():该方法表示开始绘制路径

其次使用下面的方法绘制路径:

  • arc(x, y, radius, startAngle, endAngle, counterclockwise):以(x,y)为圆心绘制一条弧线,弧线的半径为radius,起始和结束角度(用弧度表示)分别为startAngle和endAngle.最后一个参数表示startAngle和endAngle是否按逆时针方向计算,值为false表示按顺时针方向计算.
  • arcTo(x1, y1, x2, y2, radius):从上一点开始绘制一条弧线,到(x2, y2)为止,并且以给定的半径radius穿过(x1, y1)
  • bezierCurveTo(c1x, c1y, c2x, c2y, 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指定.这个方法绘制的是矩形路径,而不是strokeRect()和fillRect()所绘制的独立的形状.

结束绘制路径之前,可以检测某个坐标是否在路径轨迹上:

  • isPointInPath():返回布尔值

结束绘制路径之后,可以选择使用下面的方法进一步处理:

  • closePath():绘制一条连接到路径起点的线条;
  • fill():利用fillStyle填充;
  • stroke():利用strokeStyle描边;
  • clip():创建一个剪切区域;

如:

绘制文本

绘制文本通常有两个方法:

  • fillText()(推荐使用)
  • strokeText()
  • measureText():一个参数,即要绘制的文本

这两个方法都可以接收4个参数:要绘制的文本字符串,x坐标,y坐标和可选的最大像素值.而且这三个方法都以下列3个属性为基础:

  • font:表示文本样式,大小及字体,用CSS中指定字体的格式来指定.
  • textAlign:表示文本对其方式.可能的值有"start","end","left","right"和"center".不推荐使用"left"和"right".
  • textBaseline:表示文本的基线.可能的值有"top","hanging","middle","alphabetic","ideographic"和"bottom".值为top,y坐标表示文本顶端,值为"bottom",y坐标表示文本底端,值为hanging,alphabetic和ideographic,则y坐标分别指向字体的特定基线坐标.

如:

对于measureText()方法,会返回测量字符串相关数据的一个对象,目前只有width属性

变换

  • rotate(angle):围绕原点旋转图像angle弧度.
  • scale(scaleX, scaleY):缩放图像,在X方向乘以scaleX,在y方向乘以scaleY.scaleX和scaleY的默认值是1.0
  • translate(x, y):将坐标原定移动到(x, y).执行这个变换之后,坐标(0,0)会变成之前由(x,y)表示的点.
  • transform(m1_1, m1_2, m2_1, m2_2, dx, dy):直接修改变换矩阵,

方法是乘以如下矩阵:

setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy):将变换矩阵重置为默认状态,然后再调用transform

如:

而我们可以通过

  • save()

在堆栈中保存设置,而通过

  • restore()

方法恢复上一级状态.我们可以连续使用save()和restore()方法。

要注意的是,save()保存的只是对绘图上下文的设置和变换,不会保存绘图上下文的内容。

绘制图像

使用

  • drawImage()

方法来绘制图像.有三种不同的参数组合:

  • 传入一个HTML<img>元素,以及绘制该图像的起点的x和y坐标.

如:

  • 再多传两个参数,分别表示目标宽度和目标高度(进行缩放,不影响上下文的变换矩阵)

如:

  • 再多传4个参数,表示目标图像的x,y坐标和目标图像的宽度和高度(并没有进行缩放):

如:

需要注意的是:图像不能来自其他域,否则toDataURL()会抛出错误。

阴影

  • shadowColor: 用CSS颜色格式表示的阴影颜色,默认为黑色
  • shadowOffsetX: 形状或路径x轴方向的阴影偏移量,默认为0
  • shadowOffsetY: 形状或路径y轴方向的阴影偏移量,默认为0
  • shadowBlur: 模糊的像素数,默认0,即不模糊

如:

渐变

渐变由CanvasGradient实例表示,调用

  • createLinearGradient()方法,此方法接收4个参数:起点的x坐标,起点的y坐标,终点的x坐标,终点的y坐标.调用这个方法后,它就会创建一个指定大小的渐变,并返回CanvasGradient对象实例.

创建了渐变对象后,下一步就是使用

  • addColorStop()方法来指定色标.接收两个参数:色标位置和CSS颜色值.色标位置是一个0(开始的颜色)到1(结束的颜色)之间的数字.

如:

如果要绘制非常准确的渐变矩形,则可以使用下面的函数:

如:

要创建径向渐变,就要调用

  • createRadialGradient()方法,接收6个参数:起点圆的圆心及半径(前三个参数);终点圆的圆心及半径(后三个参数):

如:

模式

模式就是重复的图像,可以用来填充或描边图形.要创建一个新模式,可以调用:

  • createPattern()方法并传入两个参数:一个HTMLimg元素和一个表示如何重复图像的字符串.

其中,第二个参数的值与CSS的background-repeat属性值相同,包括"repeat","repeat-x","repeat-y","no-repeat";另外,该方法的第一个参数也可以传入video元素以及另一个canvas元素;

使用图像数据

通过

  • getImageData()取得原始图像数据.这个方法接收4个参数:要取得其数据的画面区域的x和y坐标以及该区域的像素宽度和高度:
  • setImageData()则根据图像数据,在canvas中绘制出来

如:

优化后的代码:

或者让图片颜色反转:

合成

另外还有属性:

  • globalAlpha;
  • globalCompositionOperation;

其中第一个属性是一个介于0-1之间的值,用来指定所有绘制的透明度,这样就可以先指定透明度,再画图,然后再重置透明度,如:

另外第二个属性则表示后绘制的图形怎样与先绘制的图形结合:

  • source-over: 默认。在目标图像上显示源图像。
  • source-atop: 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
  • source-in: 在目标图像中显示源图像。只有目标图像内的源图像部分会显示,目标图像是透明的。
  • source-out: 在目标图像之外显示源图像。只会显示目标图像之外源图像部分,目标图像是透明的。
  • destination-over: 在源图像上方显示目标图像。
  • destination-atop: 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
  • destination-in: 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示,源图像是透明的。
  • destination-out: 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示,源图像是透明的。
  • lighter: 显示源图像 + 目标图像。
  • copy: 显示源图像。忽略目标图像。
  • source-over: 使用异或操作对源图像与目标图像进行组合。

如将第二个图片放在第一个图片下方:

 

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: