欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Canvas 绘图学习笔记2

程序员文章站 2022-04-14 18:26:24
1 绘制文本 fillText(string,x,y,maxWidth) //填充试绘制文本 strokeText(string,x,y,maxWidth) 画线试绘制文本 设置字体样式: context.font 文字的字体样式 可选属性: font-style 字体样式 font-variant ......

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可以用来绘制视频