Canvas 属性

属性

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
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,590评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 86,808评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,151评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,779评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,773评论 5赞 367
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,656评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,022评论 3赞 398
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,678评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 41,038评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,756评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,411评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,005评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,973评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,053评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,495评论 2赞 343