使用图片
在canvas中插入图片(需要image对象)
1.canvas操作图片时,必须要等图片加载完才能操作
2.drawImage(image, x, y, width, height)
其中 image 是 image 或者 canvas 对象,x 和 y 是其在目标 canvas 里的起始坐标。
这个方法多了2个参数:width 和 height,这两个参数用来控制当canvas画入时应该缩放的大小
var img = new Image ( ) ;
img. src= "tg.png" ;
img. onload= function ( ) {
draw ( ) ;
}
function draw ( ) {
ctx. drawImage ( img, 0 , 0 , img. width, img. height)
}
设置背景
在canvas中设置背景(需要image对象)
1.createPattern(image, repetition)
image:图像源
epetition:(平铺)
"repeat"
"repeat-x"
"repeat-y"
"no-repeat"
一般情况下,我们都会将createPattern返回的对象作为fillstyle的值
function draw ( ) {
var pattern = ctx. createPattern ( img, "no-repeat" )
ctx. fillStyle= pattern;
ctx. fillRect ( 0 , 0 , 300 , 300 ) ;
}
绘制文本
在canvas中绘制文本
canvas 提供了两种方法来渲染文本:
fillText(text, x, y)
在指定的(x,y)位置填充指定的文本
strokeText(text, x, y)
在指定的(x,y)位置绘制文本边框
var canvas = document. querySelector ( "#test" ) ;
if ( canvas. getContext) {
var ctx = canvas. getContext ( "2d" ) ;
ctx. fillStyle= "green"
ctx. font= "40px sans-serif"
ctx. fillText ( "小明" , 100 , 100 ) ;
ctx. strokeText ( "小明" , 100 , 100 ) ;
}
文本样式
font = value
当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法.
默认的字体是 10px sans-serif。
font属性在指定时,必须要有大小和字体 缺一不可
textAlign = value
文本对齐选项. 可选的值包括: left, right center.
textBaseline = value
描述绘制文本时,当前文本基线的属性。
top
文本基线在文本块的顶部。
middle
文本基线在文本块的中间。
bottom
文本基线在文本块的底部。
var canvas = document. querySelector ( "#test" ) ;
if ( canvas. getContext) {
var ctx = canvas. getContext ( "2d" ) ;
ctx. fillStyle= "green" ;
ctx. font= "40px sans-serif" ;
ctx. textAlign= "center" ;
ctx. textBaseline= "middle" ;
ctx. fillText ( "小明" , 0 , 0 ) ;
}
measureText
measureText() 方法返回一个 TextMetrics 对象,包含关于文本尺寸的信息(例如文本的宽度)
var ctx = canvas. getContext ( "2d" ) ;
ctx. fillStyle= "green" ;
ctx. font= "60px sans-serif" ;
ctx. fillText ( "小明" , 50 , 50 ) ;
var obj = ctx. measureText ( "小明" ) ;
console. log ( obj) ;
canvas中文本水平垂直居中
var oC = document. getElementById ( 'c1' ) ;
var oGC = oC. getContext ( '2d' ) ;
oGC. font = '60px impact' ;
oGC. textBaseline = 'middle' ;
var w = oGC. measureText ( '尚硅谷' ) . width;
oGC. fillText ( '尚硅谷' , ( oC. width - w) / 2 , ( oC. height - 60 ) / 2 ) ;
阴影(文本阴影&盒模型阴影)
shadowOffsetX = float
shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离,
它们默认都为 0。
shadowOffsetY = float
shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离,
它们默认都为 0。
shadowBlur = float
shadowBlur 用于设定阴影的模糊程度,其数值并不跟像素数量挂钩,也不受变换矩阵的影响,默认为 0。
shadowColor = color(必需项)
shadowColor 是标准的 CSS 颜色值,用于设定阴影颜色效果,默认是全透明的黑色。
var oC = document. getElementById ( 'c1' ) ;
var oGC = oC. getContext ( '2d' ) ;
oGC. shadowOffsetX = 20 ;
oGC. shadowOffsetY = 20 ;
oGC. shadowBlur = 30 ;
oGC. shadowColor = "yellow" ;
oGC. fillRect ( 0 , 0 , 100 , 100 ) ;