Canvas 属性

2018-05-07 本文已影响0人 PYFang

属性

1、canvas

CanvasRenderingContext2D.canvas 属性是只读的，是HTMLCanvasElement的反向引用，如果没有<Canvas> 元素与之对应，对象值为null

语法：ctx.canvas

示例：
给出<canvas>元素

//html
<canvas id="canvas"></canvas>
//JS
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.canvas

2、fillStyle

.fillStyle 描述颜色和样式的属性，默认值是#000 黑色

语法：
ctx.fillStyle = color
ctx.fillStyle = gradient
ctx.fillStyle = pattern

选项：
color 被转换成CSS<color>颜色值
gradient 线性渐变或者放射性渐变
patern 可重复图像

示例：

使用 fillStyle 属性设置不同的颜色

//html
<canvas id="canvas"></canvas>
//js
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")

ctx.fillStyle = "blue"
ctx.fillRect(10, 10, 100, 100)

效果图：

fillStyle.png

fillStyle使用 for循环的例子
我们使用两个 for循环绘制一个矩形表格，每个单元格都有不同的颜色。最终的结果图像看起来像屏幕截图，其实没有令人惊叹的事情发生。我们使用两个变量i和 j为每一个单元格生成唯一的RGB颜色，并且只改变红色和绿色的数值。蓝色通道的值是固定不变的。通过修改这些通道，你能生成各种各样的调色板。通过逐步地增加，你能实现类似 Photoshop 的调色板。

//html
<canvas id="canvas"></canvas>
//js
var ctx = document.getElementById('canvas').getContext('2d')
for (var i=0;i<6;i++){
  for (var j=0;j<6;j++){
    ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
                     Math.floor(255-42.5*j) + ',0)'
    ctx.fillRect(j*25,i*25,25,25)
  }
}

效果图：

fillStyle-for.png

3、font

设置当前字体样式的属性。与此同时CSS font使用相同，默认字体是 10px sans-serif.

语法：ctx.font = value

示例：
设置不同的字体大小和字体种类

//js
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")

ctx.font = "48px serif"
ctx.strokeText("Hello world", 50, 100)

效果图：

font.png

4、globalAlpha

描述在canvas上绘图之前，设置图形和图片透明度的属性。数值的范围从0.0（完全透明）到1.0 （完全不透明）。

语法：ctx.globalAlpha = value

选项：
value 数字在 0.0 （完全透明）和 1.0 （完全不透明）之间。默认值是 1.0。如果数值不在范围内，包括Infinity和NaN无法赋值，并且 globalAlpha 会保持原有的数值。
示例：
绘制了2个半透明的矩形

//js 
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")

ctx.globalAlpha = 0.5

ctx.fillStyle = "blue"
ctx.fillRect(10, 10, 100, 100)

ctx.fillStyle = "red"
ctx.fillRect(50, 50, 100, 100)

效果图：

globalAplha.png

5、globalComponiteOperation

设置要在绘制新形状时应用的合成操作的类型，其中type是用于标识要使用的合成或混合模式操作的字符串。

语法：ctx.globalCompositeOperation = type

示例：
绘制2个矩形在重叠时相互排斥的情况。

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.globalCompositeOperation = "xor"
ctx.fillStyle = "blue"
ctx.fillRect(10,10,100,100)
ctx.fillStyle = "red"
ctx.fillRect(50,50,100,100)

效果图：

blobalComponiteOperation.png

6 、lineCap

指定如何绘制每一条线段末端的属性。有3个可能的值，分别是：butt, round square。默认值是 butt。

语法：
ctx.lineCap = "butt"
ctx.lineCap = "round"
ctx.lineCap = "square"

选项：
butt 线末端以方形结束
round 线段末端以圆形结束
square 线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域
示例：
使用 lineCap 属性绘制以圆形结尾的线段。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath()
ctx.moveTo(0,0)
ctx.lineWidth = 15
ctx.lineCap = "round"
ctx.lineTo(100, 100)
ctx.stroke()

效果图：

lineCap.png

7、lineDashOffset

设置虚线偏移量的属性，例如可以实现跑马灯的效果

语法：ctx.lineDashOffset = value

value 偏移量是float精度的数字。初始值为0.0
示例：
使用 lineDashOffset 属性绘制虚线

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")

ctx.setLineDash([4,16])
ctx.lineDashOffset = 2

ctx.beginPath()
ctx.moveTo(0,100)
ctx.lineTo(400,100)
ctx.stroke()

效果图：

lineDashOffset.png

8、lineJoin

用来设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性（长度为0的变形部分，其指定的末端和控制点在同一位置，会被忽略）。

语法：
ctx.lineJoin = "bevel"
ctx.lineJoin = "round"
ctx.lineJoin = "miter"

选项：
此属性有3个值：round， bevel ，miter。默认值是 miter。注意：如果2个相连部分在同一方向，那么lineJoin不会产生任何效果，因为在那种情况下不会出现连接区域。

round 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状，圆角的半径是线段的宽度。
bevel 在相连部分的末端填充一个额外的以三角形为底的区域，每个部分都有各自独立的矩形拐角。
miter 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过miterLimit属性看到效果。
示例：

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")

ctx.lineWidth = 10
ctx.lineJoin = "round"
ctx.beginPath()
ctx.moveTo(0,0)
ctx.lineTo(200, 100)
ctx.lineTo(300,0)
ctx.stroke()

效果图：

lineJoin.png

9、lineWidth

设置线段厚度的属性（即线段的宽度）。当获取属性值时，它可以返回当前的值（默认是1.0）。当给属性值赋值时，0，负数，Infinity 和NaN 都会被忽略；除此之外，都会被赋予一个新值。

语法：ctx.lineWidth = value

选项：
value 描述线段宽度的数字。0，负数，Infinity 与NaN会被忽略

示例：

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")

ctx.beginPath()
ctx.moveTo(0,0)
ctx.lineWidth = 15
ctx.lineTo(100,100)
ctx.stroke()

效果图：

lineWidth.png

10、miterLimit

设置斜接面限制比例的属性。当获取属性值时，会返回当前的值（默认值是10.0 ）。当给属性值赋值时，0，负数，Infinity 和NaN 都会被忽略；除此之外，都会被赋予一个新值。

语法：ctx.miterLimit = value

value 斜接面限制比例的数字。0，负数，Infinity 和NaN 都会被忽略

简释：

ctx.lineJoin = "miter" // "miter" > "round" ) "bevel" ]

只有当lineJoin 显示为">"时，miterLimit 才有效。边角的角度越小，斜接长度就会越大。为了避免斜接长度过长，我们可以使用miterLimit属性。如果斜接长度超过过miterLimit的值，边角会以lineJoin的"]"类型来显示

11、shadowBlue

描述模糊效果程度的属性；它既不对应象素值也不受当前转换矩阵的影响。默认值是0

语法： ctx.shadowBlue = level

level 描述模糊效果程度的，float 类型的值，默认值是0 。负数，Infinity或者 NaN 都会被忽略

示例：

使用 shadowblur 属性设置模糊阴影。注意：只有设置shadowColor属性值为不透明，阴影才会被绘制。

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")

ctx.shadowColor = "black"
ctx.shadowBlur = 10

ctx.fillStyle = "white"
ctx.fillRect(10,10,100,100)

效果图：

shadowBlue.png

12、shadowColor

描述阴影颜色
示例：
使用 shadowColor 属性设置阴影的颜色。注意：shadowColor属性设置成不透明的，并且shadowBlur，shadowOffsetX或者shadowOffsetY属性不为0，阴影才会被绘制

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")

ctx.shoadowColor = "black"
ctx.shadowOffsetY = 10
ctx.shadowOffsetX = 10

ctx.fillStyle = "green"
ctx.fillRect(10,10,100,100)

效果图：

shoadowColor.png

13 、shadowOffsetX

描述阴影水平面偏移距离

语法： ctx.shadowOffsetX = offset
offset 阴影水平偏移距离的float 类型的值。默认值是0。Infinity或者NaN 都会被忽略

示例：
使用 shadowOffsetX 属性设置阴影的水平偏移量。注意：将shadowColor属性设置成不透明，阴影才会被绘制。

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")

ctx.shadowColor = "black"
ctx.shadowOffsetX = 10
ctx.shadowBlur = 10

ctx.fillStyle = "green"
ctx.fillRect(10,10,100,100)

效果图：

shadowOffsetX.png

14、shadowOffsetY

描述阴影垂直偏移距离

语法：ctx.shadowOffsetY = offset
offset 阴影垂直偏移距离的float 类型的值。默认值是0。Infinity或者NaN 都会被忽略
示例：

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")

ctx.shadowColor = "black"
ctx.shadowOffsetY = 10
ctx.shadowBlur = 10

ctx.fillStyle = "green"
ctx.fillRect(10, 10, 100, 100)

效果图：

shadowOffsetY.png

15、strokeStyle

描述画笔（绘制图形）颜色或者样式的属性。默认值是 #000 (black)

语法：
ctx.strokeStyle = color
ctx.strokeStyle = gradient
ctx.strokeStyle = pattern

选项：
color 转换成CSS<color>值
gradient 线性渐变或放射性渐变
pattern 可重复的图片

示例：
使用 strokeStyle 属性设置不同的颜色。
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")

ctx.strokeStyle = "blue"
ctx.strokeRect(10,10,100,100)
效果图：

strokeStyle.png

16、textAlign

绘制文本时，文本的对齐方式的属性。注意，该对齐是基于CanvasRenderingContext2D.fillText方法的x的值。所以如果textAlign="center"，那么该文本将画在 x-50%*width。

注：这里的textAlign="center"比较特殊。textAlign的值为center时候文本的居中是基于你在fillText的时候所给的x的值，也就是说文本一半在x的左边，一半在x的右边（比较通俗，描述不太清楚，自己实验一下就知道）。所以，如果你想让文本在整个canvas居中，就需要将fillText的x值设置成canvas的宽度的一半。

语法：
ctx.textAlign = "left" || "right" || "center" || "start" || "end"

示例：

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")

ctx.font = "48px serif"
ctx.textAlign = "left"
ctx.strokeText("Hello world" ,0,100)

效果图：

textAlign.png

17、textBaseline

当前文本基线的属性（决定文字垂直方向对齐方式）

语法：
ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom"

选项：
top 顶部
hanging 悬挂基线
middle 中间
alphabetic 标准的字母基线
ideographic 表意字基线；如果字符本身超出了alphabetic表意字基线，那么ideograhpic基线位置在字符本身的底部
botom 底部，与ideographic基线的区别在于ideographic基线不需要考虑下行字母
默认值是alphabetic

示例：

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")

ctx.font = "48px serif"
ctx.textBaseline = "hanging"
ctx.strokeText("Hello world" ,0,100)

效果图：

textBaseline.png

Canvas 属性

属性

1、canvas

2、fillStyle

3、font

4、globalAlpha

5、globalComponiteOperation

6 、lineCap

7、lineDashOffset

8、lineJoin

9、lineWidth

10、miterLimit

11、shadowBlue

12、shadowColor

13 、shadowOffsetX

14、shadowOffsetY

15、strokeStyle

16、textAlign

17、textBaseline

猜你喜欢

热点阅读