Canvas 绘图学习笔记2
1 绘制文本
filltext(string,x,y,maxwidth) //填充试绘制文本
stroketext(string,x,y,maxwidth) 画线试绘制文本
设置字体样式:
context.font 文字的字体样式
可选属性:
font-style 字体样式
font-variant 字体变体
font-weight 字体粗细
font-size
font-family
caption
icon
menu
message-box
small-caption
status-bar
实例:
ctx.font = "30px georgia"
context.textalign 文字的对齐方式
start
end
center
left
right
context.textbaseline 调整文本的基线
top
hanging
middle
alphabetic
ideographic
bottom
2.ctx.globalcompositeoperation 设置图形交叉参数
source-atop
....
3.canvas状态的保存与恢复
ctx.save() 保存之前的绘图参数,压栈保存
ctx.restore() 恢复之前保存的绘图参数
4.阴影
ctx.shadowcolor
ctx.shadowoffsetx 阴影对于图像的水平偏移
ctx.shadowoffsety 阴影对于图像的垂直偏移
ctx.shadowblur 模糊参数
5.绘制图像
var img = new image(); img.src = "......." img.onload = function() { ctx.drawimage(img,x,y); }
ctx.drawimage(img,x,y);
ctx.drawimage(img,x,y,width,height);
width:绘制图片的最终宽度
height:绘制图片的最终高度
ctx.drawimage(img,sx,sy,swidth,sheight,dx,dy,width,height);
sx:裁剪区域起始横坐标
sy:裁剪区域起始纵坐标
swidth:裁剪区域宽度
sheight:裁剪区域高度
6.drawimage可以用来绘制视频
上一篇: 编写代码的「八荣八耻」- 以用户易用为荣,以复杂歧义为耻
下一篇: python爬取百度文库所有内容